バーをドラッグしてスクロールすると.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

あなたはscrollイベントの "スロットル" の取り扱いに、setTimeoutを使用して、例えば、あなたの関数を実行延期することができます。 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>