Implement relative scroll time from distance#167
Implement relative scroll time from distance#167luispuig wants to merge 3 commits intoiamdustan:masterfrom
Conversation
jeremenichelli
left a comment
jeremenichelli
left a comment
There was a problem hiding this comment.
Thanks a lot for this PR Luis, I left some comments, let me know what you think!
src/smoothscroll.js
Outdated
| method = scrollElement; | ||
| } | ||
|
|
||
| const maxDistance = Math.max(Math.abs(x - startX), Math.abs(y - startY)); |
There was a problem hiding this comment.
Can we add a comment on top of this two lines of math operations (not that is unclear what they do), it will help people reading the code for the first time a lot, to understand the reasoning and why we are doing it.
There was a problem hiding this comment.
Sure, let put it in 2 lines and better for others to modify it in the future.
There was a problem hiding this comment.
Please, feel free to suggest a different explanation, comments, etc...
Also, I added the animation speed which is 1 pixel/ms. It will make it easier to modify it you think that another value matches better the native bahaivour.
|
@jeremenichelli , what do you think about the changes? Please, let me know what else to change. Thanks :) |
|
Sorry for the late response Luis, I've been caught up with personal stuff. One thing I notice is you are using const and in the build project we don't have transpiling to support old browsers, so I would change those to vars for now. |
2 participants
The SCROLL_TIME is a magic number of 468ms.
I would like to use this great polyfill in https://github.com/luispuig/react-snaplist-carousel but this time is too long.
My first thought was making it configurable but then I read #140 and #65
I agree
Here I got the idea of using the scroll distance to calculate the scroll time.
I set up some min and max scroll times.
Left: Firefox, Center: Chrome, Right: Safari using the polyfill
Chrome makes the animation much faster than Firefox and different ease. So, I tried to adjust something in the middle.
P.D: Great work with this polyfill :D