alvarotrigo / alvarotrigo/fullPage.js
Solution to Apple clickpad momentum causing multiple sections to scroll unintentionally
- 主要语言
- JavaScript
- 星标
- 35.4k
- 派生
- 7.1k
- PR 合并指标
- 30 天内没有已合并 PR
描述
### Description
Apple clickpads have "momentum" which continue sending scroll events for a period of time after the user stops scrolling and can cause fullPage.js to move through multiple sections when the user only intended to move through one. This is a solution to the problem that still allows users to quickly scroll through sections.
The solution is written to work with fullPage.js externally, and while I've ported it from a slightly more project-specific implementation using es6, I don't have the time to learn the fullPage.js codebase and integrate the solution there. Maybe someone more capable would be willing to take the task on, but it seemed useful to have a working solution out there either way.
The logic is to have a mouse scroll event trigger two timeouts and prevent scrolling until one of them finishes:
1. The first timeout is 100 milliseconds long and gets cleared + restarted each time a scroll event takes place, meaning it only concludes once the user has stopped scrolling for 100ms.
2. The second timeout is 1.1 seconds long and ensures that if momentum and the user's scroll pattern is preventing scroll events from ever stopping, fullPage.js will move to the next section every 1.1 seconds.
When either timeout finishes, the other is cleared and the `mouseScrolling` flag is set to false, resetting things until the next scroll event occurs.
There's an initial check to ensure the delta is either `1` or `-1` before running any functionality. This is because at least some configurations with the latest Apple OS trigger a wheel event with a delta starting at 0 before ramping up.
```javascript
var shortWaitTime = 100;
var longWaitTime = 1100;
var mouseScrolling = false;
var shortTimeout;
var longTimeout;
var mouseScroll = function(e) {
var delta = Math.max(-1, Math.min(1, e.originalEvent.wheelDelta || -e.originalEvent.detail));
e.preventDefault();
e.stopPropagation();
if (delta === 1 || delta === -1) {
clearTimeout(shortTimeout);
shortTimeout = setTimeout(function() {
clearTimeout(longTimeout);
mouseScrolling = false;
}, shortWaitTime);
if (!mouseScrolling) {
mouseScrolling = true;
if (delta === 1) {
$.fn.fullpage.moveSectionUp();
} else {
$.fn.fullpage.moveSectionDown();
}
clearTimeout(longTimeout);
longTimeout = setTimeout(function() {
clearTimeout(shortTimeout);
mouseScrolling = false;
}, longWaitTime);
}
}
};
$(document).on("mousewheel DOMMouseScroll", mouseScroll);
```
### Versions
This is an issue on any browser using an Apple clickpad on OSX/macOS to scroll through sections.
贡献指南
评估
这个 Issue 还没有评估数据。