使「scrollLeft」/「scrollTop」更改不會觸發滾動事件偵聽器

Question

當前我的程序處於偵聽用戶滾動某個元素的位置，但有時也會自動自動滾動此元素。 （不是一個漸進的，漂亮的滾動，而是一個瞬間跳躍，這是有道理的，我發誓。）

有沒有辦法讓滾動事件不觸發，如果滾動是通過設置scrollLeft或scrollTop？我首先想到的是一個基本的開關，如：

ignoreScrollEvents = true; 
element.scrollLeft = x; 
ignoreScrollEvents = false; 

function onScroll() { 
    if(ignoreScrollEvents) return false; 
} 

但由於事件不會立即觸發（哎呀，duhh），這不是一個可行的解決方案。我還可以嘗試其他類型的答案嗎？我也使用jQuery，如果這有幫助的話。

Answer 1

最簡單的泛型方法？只需重置事件處理程序中的標誌即可。你需要先檢查一下，如果你真的改變了數值，否則一個事件將不會被觸發 - 因爲Rodrigo notes，這裏的一個好習慣是把這個分解成所謂的「setter」函數：

function setScrollLeft(x) 
{ 
    if (element.scrollLeft != x) 
    { 
    ignoreScrollEvents = true; 
    element.scrollLeft = x; 
    } 
} 

... 

function onScroll() 
{ 
    var ignore = ignoreScrollEvents; 
    ignoreScrollEvents = false; 

    if (ignore) return false; 

    ... 
} 

但是，根據您的需要，您可能已經在某處存儲了滾動位置;如果是這樣，只需更新並檢查該標誌即可。例如：

element.scrollLeft = currentScrollLeft = x; 

... 

function onScroll() 
{ 
    // retrieve element, etc... 

    if (element.scrollLeft == currentScrollLeft) return false; 

    ... 
} 

Answer 2

你可以constantly check如果scroll position變化...

Answer 3

你可以嘗試保存你的元素的偏移頂部和匹配它反對scrollTop的，當你進入車內onScroll：

function onScroll(){ 
    var scrollTop = (document.documentElement.scrollTop || document.body.scrollTop), 
    offsetTop = $('selector').offset().top; 
    if(offsetTop > scrollTop){ 
     //user has not scrolled to element so do auto scrolling 
    } 
} 

Answer 4

一個二傳手怎麼樣？

var _preventEvent = false; // set global flag 
 

 
function setScrollTop(amount) { 
 
    _preventEvent = true; // set flag 
 
    document.documentElement.scrollTop = amount * Math.random(); 
 
} 
 

 
function setScrollLeft(amount) { 
 
    _preventEvent = true; // set flag 
 
    document.documentElement.scrollLeft = amount * Math.random(); 
 
} 
 

 
// scroll event listener 
 
window.onscroll = function() { 
 
    console.clear(); 
 
    
 
    if (_preventEvent) { 
 
    _preventEvent = false; // reset flag 
 
    return; 
 
    } 
 
    
 
    console.log('normal scroll'); 
 
}

html{ height:500%; width:500%; } 
 
button{ position:fixed; } 
 
button + button{ top:50px; }

<button onclick=setScrollTop(1000)>Random scrollTop</button> 
 
<button onclick=setScrollLeft(1000)>Random scrollLeft</button>

Answer 5

好吧，我的最終解決方案，構建關Shog9的（不是我真正的代碼，但我的方法）：

var oldScrollLeft = element.scrollLeft; 
element.scrollLeft = x; 
if(element.scrollLeft != oldScrollLeft) { 
    ignoreScrollEvents = true; 
} 

function onScroll() { 
    if(!ignoreScrollEvents) performGreatActions(); 
    ignoreScrollEvents = false; 
} 

if語句只設置忽略標誌當scrollLeft值實際上最終發生變化時，例如從0到0的設置不會錯誤地設置標誌。

謝謝，所有！