鼠标滚轮滚动事件?

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;相当于等滚动滚动对于页面的影响完成之后再调用函数。  不过效果很有限,因为设置时间短没效果,时间长就被人给当作网页卡死了。

该如何解决?

咕咕问
浏览 2560回答 1
1回答
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript