alvarotrigo / alvarotrigo/pagePiling.js

Scroll too sensitive on trackpad, and proposition to add a 'scroll Sensitivity' option

Đang mở
#104 7 bình luận 0 reaction 0 người được giao Xem trên GitHub
Ngôn ngữ chính
JavaScript
Star
4.1k
Fork
633
Chỉ số merge pull request
Không có pull request nào được merge trong 30 ngày

Mô tả

First thanks for such a great plugin!

I've used fullPage.js before and now pagePiling.js, one common issue is the scroll detection is too sensitive, especially when you use trackpad on laptop: a slight two finger scroll (ou even just two finger touch) on trackpad will cause the sections to change.

I've found in source code the following to perform a mouseWheel detection & scroll
`/**
\* Detecting mousewheel scrolling
*
\* http://blogs.sitepointstatic.com/examples/tech/mouse-wheel/index.html
\* http://www.sitepoint.com/html5-javascript-mouse-wheel/
*/
var prevTime = new Date().getTime();

```
function MouseWheelHandler(e) {
var curTime = new Date().getTime();
// cross-browser wheel delta
e = e || window.event;
var value = e.wheelDelta || -e.deltaY || -e.detail;
var delta = Math.max(-1, Math.min(1, value));

var horizontalDetection = typeof e.wheelDeltaX !== 'undefined' || typeof e.deltaX !== 'undefined';
var isScrollingVertically = (Math.abs(e.wheelDeltaX) < Math.abs(e.wheelDelta)) || (Math.abs(e.deltaX ) < Math.abs(e.deltaY) || !horizontalDetection);

//Limiting the array to 150 (lets not waste memory!)
if(scrollings.length > 149){
scrollings.shift();
}

//keeping record of the previous scrollings
scrollings.push(Math.abs(value));

//time difference between the last scroll and the current one
var timeDiff = curTime-prevTime;
prevTime = curTime;

//haven't they scrolled in a while?
//(enough to be consider a different scrolling action to scroll another section)
if(timeDiff > 200){
//emptying the array, we dont care about old scrollings for our averages
scrollings = [];
}

if(!isMoving()){
var activeSection = $('.pp-section.active');
var scrollable = isScrollable(activeSection);

//keeping record of the previous scrollings
scrollings.push(Math.abs(value));

var averageEnd = getAverage(scrollings, 10);
var averageMiddle = getAverage(scrollings, 70);
var isAccelerating = averageEnd >= averageMiddle;

if(isAccelerating && isScrollingVertically){
//scrolling down?
if (delta < 0) {
scrolling('down', scrollable);

//scrolling up?
}else if(delta>0){
scrolling('up', scrollable);
}
}

return false;
}
}`
```

However, the delta value here is varied with different browsers, and sometimes (for example on Mac trackpad or mouse) it's very sensitive with the slightest move. And the isAccelerating boolean in most cases always returns true ( especially if the scrollings array is shorter ).

I tried to make a workaround with a normalizeWheel function taken from here:
https://github.com/facebook/fixed-data-table/blob/master/src/vendor_upstream/dom/normalizeWheel.js
From which I can get the pixel units of mouse/wheel event, and specify only to scroll when the absolute value of pY is larger than a certain number, not purely based on if the delta is positive or negative.

The problem of this workaround is, as stated in the normalizeWheel function, that the pixel units might have "crazy differences between browsers", any thoughts?

Hướng dẫn đóng góp

Chưa lập chỉ mục được hướng dẫn đóng góp cho kho mã nguồn này

Đánh giá

Issue này chưa được đánh giá.

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.