首頁猿問 mouseWhile...

mouseWhile 不管滾多遠只觸發(fā)一次，怎么設置

JQuery

艷妮子Yeah 2016-09-03 13:38:51

滾動鼠標滑輪，每次向下滾動要輸出好多1，怎么確保不管滾多遠都只輸出一個1$(document).on("mousewheel DOMMouseScroll", function (e) { ??????? var delta = (e.originalEvent.wheelDelta && (e.originalEvent.wheelDelta > 0 ? 1 : -1)) || ??????????????????? (e.originalEvent.detail && (e.originalEvent.detail > 0 ? -1 : 1));??????? if (delta<0) {??????????? console.log("1");? ??????? }else{????????????console.log("2");???????? }??? });

查看完整描述

3 回答

已采納

stone310

TA貢獻361條經(jīng)驗獲得超191個贊

??var?a=0;??????//本次的getTime()
??var?b=0;??????//上一次的getTime()
??var?flag=5;???//設定一個判斷變量，保證在條件下console.log只執(zhí)行一次
$(document).on("mousewheel?DOMMouseScroll",?function?(e)?{
????b=a;???????//b賦值為上一次的getTime()
????a=new?Date().getTime();???//a賦值為本次的getTime()
????var?delta?=?(e.originalEvent.wheelDelta?&&?(e.originalEvent.wheelDelta?>?0??1??:?-1))?||
??????????????(e.originalEvent.detail?&&?(e.originalEvent.detail?>?0??-1?:?1));
????if(a-b<=300){?????//如果兩次getTime()差距在300ms以內(nèi)，可以視作在連續(xù)滾動
????????if(delta<0?&&?delta!=flag){????//保證delta只執(zhí)行一次，連續(xù)滾動中第二次滾動，delta==flag，即不成立
????????????console.log("1")
????????????flag=delta???????????????
????????}else?if(delta>0?&&?delta!=flag){
????????????console.log("2")
????????????flag=delta
????????};
????}else{???????????????????//非連續(xù)滾動下，即getTimer差距300以上
????????if(delta<0){
????????????console.log("1")
????????flag=delta????????????????????????//防止等待時間過長出現(xiàn)2次
????????}else{
????????????console.log("2")
?????????flag=delta
????????};
????};
});

你看下是不是這種效果，這里寫的意思是，當鼠標滾軸連續(xù)滾動時（每次滾動間隔300ms以內(nèi)），只顯示1次console.log，如果鼠標慢慢滾動（每次滾動間隔300以上），則每次滾動都顯示console.log，300這個數(shù)可以改

1 反對回復 2016-09-04

艷妮子Yeah
對對，這個時間差把我的問題解決了，非常感謝，我已經(jīng)苦惱兩天了，大神，請收下我的膝蓋

回復 2016-09-04
艷妮子Yeah
var k=1; var Height=document.body.clientHeight; var time1=0; var time2=0; $(document).on("mousewheel DOMMouseScroll", function (e) { time2=time1; time1=new Date().getTime(); //a賦值為本次的getTime() var delta = (e.originalEvent.wheelDelta && (e.originalEvent.wheelDelta > 0 ? 1 : -1)) || (e.originalEvent.detail && (e.originalEvent.detail > 0 ? -1 : 1)); if (time1-time2>=300&&$(window).scrollTop()<Height&&delta<0&&k==1) { $("html,body").animate({scrollTop:Height},1000); console.log(a-b); k=0; }else if($(window).scrollTop()<=Height&&delta<0){ k=1; } }); 大神，求救，我想用這種方式實現(xiàn)當整個網(wǎng)頁處于第一屏時，滾動鼠標網(wǎng)頁整屏滾動，其余正常?？墒乾F(xiàn)在滾動鼠標時mousewhile控制頁面滾動速度，不是animate。在谷歌瀏覽器上比較明顯。

回復 2016-09-05
stone310
var Height = document.documentElement.clientHeight||document.body.clientHeight; 這里做個兼容

回復 2016-09-05

stone310

TA貢獻361條經(jīng)驗獲得超191個贊

$(document).on("m這里on改成one，意思是只執(zhí)行一次的綁定事件

反對回復 2016-09-04

艷妮子Yeah
您好，我想每次滾動鼠標只輸出一個1，不是第一次滾動輸出再滾動就不輸出了。因為滾動鼠標的程度影響觸發(fā)mousewhile的次數(shù)，怎樣做到從滾動鼠標到停止?jié)L動只觸發(fā)一次mousewhile呢

回復 2016-09-04

黑女2008

TA貢獻75條經(jīng)驗獲得超32個贊

觸發(fā)一次后移除事件

反對回復 2016-09-03

艷妮子Yeah
您好，我現(xiàn)在還有一個疑問，因為滾動鼠標的程度影響觸發(fā)mousewhile的次數(shù)，怎樣做到從滾動鼠標到停止?jié)L動只觸發(fā)一次mousewhile呢,不知道我解釋清楚了沒

回復 2016-09-04
黑女2008
你這需求有問題吧，代碼怎么知道你總共需要滾動幾次，你是滾動一次就不滾動了還是滾動100次不滾動啊，除非你確定總的滾動次數(shù)。你想啊，你都不知道要滾動多少次，怎么讓程序在最后滾動才觸發(fā)？？程序怎么知道你是最后一次滾動呢？

回復 2016-09-04
艷妮子Yeah
可能是我沒解釋清楚，我想設計一個滾屏的效果，當頁面scrolltop=0的時候滾動鼠標頁面滾動一屏。可是每次我滾動鼠標就會觸發(fā)很多mousewhile事件，出現(xiàn)閃屏的現(xiàn)象。

回復 2016-09-04