I am currently having a function which scrolls the table once triggered via onClick. The scroll moves from top to bottom in repeat cycle.
The function is as below:
dom-element: ref.current attached to table
target: total height of the table in px
duration: scroll speed
scrollForTopBottom(dom-element, target, duration)
Now, if I give duration = 2000 then the table will reach bottom in 2 seconds but I want it to go slow. I tried setting duration = target(px)*20 but that would create problem when target (scroll height) is too long and will scroll very slowly. Same for target (scroll height) when its not too long.
I am guessing I have to set the formula of duration inversely proportional to target (scroll height) ?
I have no idea how to do it. I hope I didn't make the question complex.
I solved it. The code for scrollForTopBottom() is basically taken from here which provides ability to input scroll duration using interpolation technique. I modified the interpolation technique to only return in linear motion.
In the code
scrollForTopBottom(dom-element, target, duration)
applying duration = element width or height * some constant gave me the desired output since there are multiple table instances in my react component. So each table will scroll differently based on its height/width