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;相當于等滾動滾動對于頁面的影響完成之后再調用函數。 ?不過效果很有限,因為設置時間短沒效果,時間長就被人給當作網頁卡死了。該如何解決?
鼠標滾輪滾動事件?
咕咕問
2016-09-13 16:00:00