如何通過拖動欄來執行滾動時防止.scroll（）函數執行？

Question

我有一個函數可以隱藏一些標題，而框向下滾動並在滾動時出現標題。它工作正常，但如果我滾動頁面不是通過鼠標滾輪或觸摸板，並在滾動條上使用鼠標按鈕 - 事件開始重複，我的意思是如果我將通過拖動緩慢向下滾動，標題隱藏和顯示隱藏，顯示等

我想知道是否有方法來停止事件處理程序後，它已被執行一次，而鼠標按鈕被按下？

感謝。

我的代碼：

const throttleHidings = _.throttle(headerHidings, 400); 

$(".data-table").scroll(throttleHidings); 

function headerHidings() { 
    const element = $(".hiding-part"), 
        t = "transparent"; 
    let scrollPosition = $(".data-table").scrollTop(); 


    if (scrollPosition - contentScrollPosition > 0) { 
    scrollingDown = true; 
    lastPos.bottom = scrollPosition; 
    contentScrollPosition = scrollPosition; 
    } 

    if (scrollPosition - contentScrollPosition < 0) { 
    scrollingDown = false; 
    contentScrollPosition = scrollPosition; 
    lastPos.top = scrollPosition; 
    } 

    if (scrollingDown) { 
    hiding(scrollPosition - lastPos.top); 
    } else { 
    showing(lastPos.bottom - scrollPosition); 
    } 

    function hiding(pos) { 
    if (pos > 100) { 
     $table.height("calc(100% - 133px)"); 
     element.slideUp(150); 
    } 
    } 

    function showing(pos) { 
    if (pos > 50) { 
     element.slideDown(150,() => $table.height("calc(100% - 340px)")); 
    } 
    } 
} 

Answer 1

您可以推遲執行你的功能，例如，使用setTimeout的scroll事件 「節流」 的處理。每發生一次scroll，都會等待150毫秒。如果它再次發生，clearTimeout並重新設置。

更新：這裏是你的代碼似乎工作的版本（雖然我刪除了節流，所以它可能應該稍後添加）。它並不真正顯示或隱藏任何元素 - 只是輸出信息，所以你可以看到它將在全面版本中做什麼。

$(".data-table").scroll(headerHidings); 
 

 
var contentScrollPosition = $(".data-table").scrollTop(); 
 
var lastPos = { 
 
    top: 0, 
 
    bottom: 0 
 
}; 
 

 
var $info = $(".info"); 
 

 
function headerHidings() { 
 
    const element = $(".hiding-part"), 
 
    t = "transparent"; 
 
    let scrollPosition = $(".data-table").scrollTop(); 
 

 

 
    if (scrollPosition - contentScrollPosition > 0) { 
 
    scrollingDown = true; 
 
    lastPos.bottom = scrollPosition; 
 
    contentScrollPosition = scrollPosition; 
 
    } 
 

 
    if (scrollPosition - contentScrollPosition < 0) { 
 
    scrollingDown = false; 
 
    contentScrollPosition = scrollPosition; 
 
    lastPos.top = scrollPosition; 
 
    } 
 

 
    if (scrollingDown) { 
 
    hiding(scrollPosition - lastPos.top); 
 
    } else { 
 
    showing(lastPos.bottom - scrollPosition); 
 
    } 
 

 
    function hiding(pos) { 
 
    if (pos > 100) { 
 
     //$table.height("calc(100% - 133px)"); 
 
     //element.slideUp(150); 
 
     $info.text('hiding on: ' + pos); 
 
    } 
 
    } 
 

 
    function showing(pos) { 
 
    if (pos > 50) { 
 
     //element.slideDown(150,() => $table.height("calc(100% - 340px)")); 
 
     $info.text('showing on: ' + pos); 
 
    } 
 
    } 
 
}

.data-table { 
 
    overflow: auto; 
 
    width: 50%; 
 
    max-height: 150px; 
 
    background: green; 
 
} 
 
.fake-content { 
 
    width: 200px; 
 
    height: 3000px; 
 
    background: yellow; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="info"> 
 
    Nothing happened yet. 
 
</div> 
 

 
<div class="data-table"> 
 
    <div class="fake-content"> 
 
    </div> 
 
</div>