0

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.

Harry
  • 754
  • 2
  • 16
  • What is your preferred duration for a table of 1000px height? – mamady Mar 08 '22 at 09:10
  • No such preference. That's what I am trying to achieve. For now i have kept static 20,000 ms. I guess you are right I'd need to set a base case of duration based on height. – Harry Mar 08 '22 at 09:14
  • Let me ask it in an other way, if you wanted to scroll 1000px down, how long would you like it to take? – mamady Mar 08 '22 at 09:17
  • I would like the scroll in a such a way that the user is able to read data (not too fast and not too slow) when its going all the way down. Going upwards is not an issue so I have kept that duration to 1 second. – Harry Mar 08 '22 at 09:20
  • Please provide enough code so others can better understand or reproduce the problem. – Community Mar 08 '22 at 09:26

1 Answers1

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

Harry
  • 754
  • 2
  • 16