var getrepeate = 0;
function handle(delta) {
var date1 = new Date();
if(date1.getTime() - getrepeate < 200){
return;
}
var date = new Date();
getrepeate = date.getTime();
var s = delta + ": ";
var setpositiononscroll = 0;
if (delta <0){
setpositiononscroll = setPositionForPage(true);
}else{
setpositiononscroll = setPositionForPage(false);
}
if(document.compatMode != "CSS1Compat"){
document.body.scrollTop = setpositiononscroll;
}else{
if(document.documentElement.scrollTop == 0){
document.body.scrollTop = setpositiononscroll;
console.log(setpositiononscroll + " " + document.body.scrollTop);
}else{
document.documentElement.scrollTop = setpositiononscroll;
}
}
}
function wheel(event){
var delta = 0;
if (!event) event = window.event;
if (event.wheelDelta) {
delta = event.wheelDelta/120;
if (window.opera) delta = -delta;
} else if (event.detail) {
delta = -event.detail/3;
}
if (delta)
setTimeout(function(){handle(delta);},250);
}
//监听鼠标滚轮事件
function setPageScroll(){
if (window.addEventListener){window.addEventListener('DOMMouseScroll', wheel, false);}
window.onmousewheel = document.onmousewheel = wheel;
}
上面是代码,实际上已经实现出来了,但是效果感觉不好。
这里面最上面的是全局变量,判断鼠标的滚轮滚动时间间隔,根据如果间隔太小return;
我遇到的问题是:
鼠标滚轮滚动会导致页面位置发生变化,我监听鼠标滚动触发事件是为了调整页面的卷入高度,比如:鼠标滚轮向上滚动了一次,我让网页的卷入高度 scrollTop设置为1500px; 但实际上触发事件之后浏览器将页面的卷入高度设置为了1500px;而后鼠标向上滑动则让页面的卷入高度再次发生变化,如果消除这种变化的影响。
我的解决办法是setTimeout 通过setTimeout间隔一定时间再调用事件,让页面的卷入高度设置为1500px;相当于等滚动滚动对于页面的影响完成之后再调用函数。 不过效果很有限,因为设置时间短没效果,时间长就被人给当作网页卡死了。
该如何解决?
相关分类