该博客介绍了一种使用JavaScript实现页面滚动的方法，通过监听'mousewheelDOMMouseScroll'事件，结合'preventDefault'阻止默认滚动行为，并用setTimeout实现延迟效果。示例代码中展示了如何根据滚轮方向改变内容面板的滚动，适用于Chrome和Safari浏览器。
我推荐其他方式.
您应该使用’preventDefault’并使用setTimeout延迟效果.
我在链接下面写了一个简单的原型代码.
(仅在Chrome和Safari上测试过)
[HTML]
section A
section B
section C
section D
[CSS]
body {
overflow: hidden;
height: 100%;
}
#wrap {
position: relative;
width: 100%;
height: 100%;
top: 0;
}
section {
width: 100%;
height: 600px;
}
section:nth-child(1) {
background: red;
}
section:nth-child(2) {
background: blue;
}
section:nth-child(3) {
background: green;
}
section:nth-child(4) {
background: magenta;
}
[JavaScript的]
(function() {
var currentPanel = 1;
var wrap = $('#wrap');
var panelsize = 600;
var step = 10;
var interval = 1000;
var direction = 1;
var bAnimation = false;
function animation() {
setTimeout(function() {
var currentTop = parseInt(wrap.css("top"));
if (direction < 0) {
if (currentTop <= minValue) {
setTimeout(function() {
bAnimation = false;
}, interval);
return;
}
} else {
if (currentTop >= minValue) {
setTimeout(function() {
bAnimation = false;
}, interval);
return;
}
}
wrap.css({
"top": currentTop - step
});
animation();
}, 16);
}
$(window).bind('mousewheel DOMMouseScroll', function(event) {
event.preventDefault();
if (bAnimation) return;
var currentTop = parseInt(wrap.css("top"));
if (event.originalEvent.wheelDelta < 0) {
//down scroll
minValue = currentTop - panelsize;
step = 10;
direction = -1;
} else {
//up scroll
minValue = currentTop + panelsize;
step = -10;
direction = 1;
}
console.log(minValue, bAnimation);
bAnimation = true;
animation();
});
})();
如果你引用我的代码,你应该使用’jquery animate function’或’requestAnimationframe’来表示动画逻辑.
扫一扫
3056
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
