Normalize lines to pixels in wheel scroll event #15
Conversation
|
You're right. Is there any chance to easy convert lines to pixels without using external library? |
|
It's not as simple as it sounds. This is the algorithm they use: https://github.com/twolfson/line-height/blob/master/lib/line-height.js Another option; assume 1 line == 20 pixels. This should be fine for most cases. I don't think it is so important that the scroll speed in Firefox vs another browser has to be absolutely identical. |
| @@ -148,6 +163,11 @@ export default class ScrollArea extends React.Component{ | |||
| this.setState(newState); | |||
| } | |||
|
|
|||
| convertLinesToPixels(lines) { | |||
| var pixels = lineHeight(findDOMNode(this.refs.content)); | |||
There was a problem hiding this comment.
Is that necessary to compute line height on every handleWheel event? Maybe you could move it to componentDidMount and compute line height only once
There was a problem hiding this comment.
It is necessary, because each handleWheel event tells the exact number of lines that were scrolled, which depends how fast the wheel was moved. The value may be a number like 3.4365.
There was a problem hiding this comment.
Yes but if I understand, function lineHeight() returns constant height of line(in some DOM element). It's not depend on wheel speed so it could be compute once in componentDidMount.
There was a problem hiding this comment.
Ok now I understand. Yes, I agree. I think it's a good idea to compute it once instead of each time. I will have a look into this.
|
I have amended my pull request. Now the lineHeight is calculated just once, in componentDidMount. |
Normalize lines to pixels in wheel scroll event
WheelEvent.deltaMode units can differ between browsers. For example, Firefox provides event.deltaX and event.deltaY in units of lines, whereas Chrome uses units of pixels. This causes inconsistent scroll behaviour between browsers. Firefox was extremely slow when scrolling in my testing. This commit normalizes lines to pixels based on the line-height of the content area so that Firefox scrolls as fast as Chrome.
Here are some references about this issue:
cubiq/iscroll#577 (comment)
https://github.com/noraesae/perfect-scrollbar/issues/281
http://stackoverflow.com/q/20110224/1890168
https://developer.mozilla.org/en-US/docs/Web/API/WheelEvent/deltaMode