需求
希望在頁面向下滾動時則隱藏"返回頂部"按鈕,否則顯示。
以下將滾動代碼整理出來scrollEvent()方法
(適用於滾輪滾動、鍵盤上下滾動、滾動條滾動)
代碼
/* 監聽頁面向上向下滾動事件 */
function scrollEvent() {
window.onscroll = function (e) {
scrollFunc();
if (scrollDirection == 'down') {
//頁面向下滾動要做的事情
} else if (scrollDirection == 'up') {
//頁面向上滾動要做的事情
}
}
}
var scrollAction = {
x: 'undefined',
y: 'undefined'
},
scrollDirection;
function scrollFunc() {
if (typeof scrollAction.x == 'undefined') {
scrollAction.x = window.pageXOffset;
scrollAction.y = window.pageYOffset;
}
var diffX = scrollAction.x - window.pageXOffset;
var diffY = scrollAction.y - window.pageYOffset;
if (diffX < 0) {
// Scroll right
scrollDirection = 'right';
} else if (diffX > 0) {
// Scroll left
scrollDirection = 'left';
} else if (diffY < 0) {
// Scroll down
scrollDirection = 'down';
} else if (diffY > 0) {
// Scroll up
scrollDirection = 'up';
} else {
// First scroll event
}
scrollAction.x = window.pageXOffset;
scrollAction.y = window.pageYOffset;
}