Setting dynamic speed for scroll in react

Question

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.

Answer 1

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