ウィンドウのスクロールバーのクリックを検出する

Question

テーブルをスクロールするときにメインウィンドウのスクロールを一時停止しようとしていますが、これはメインウィンドウのスクロールを再び有効にするのに問題があります。

この機能は、テーブルをスクロールするときにメインウィンドウのスクロールを一時停止します。

function preventWindowScroll() { 

    scrollTable = document.querySelector(".members-data"); 

    if (scrollTable.contains(event.target)) { 

var oldScrollPos = document.body.scrollTop; 

window.onscroll = function() { window.scrollTo(0, oldScrollPos); }; 

    } else { 
    // disable scrollTo in order to reenable main window pause 
    window.onscroll = function() {}; 
    } 
} 

問題は、メインウィンドウのスクロールバーをクリックしてドラッグしてスクロールしようとすると、まだscrollToによって詰まっているということです。 私はonclickイベントを実行しようとしましたが、スクロールバーをクリックしても機能しません。

document.body.onclick = function(e) { 

    scrollTable = document.querySelector(".members-data"); 

    if (!scrollTable.contains(e.target)) { 
    window.onscroll = function() {}; 
    } 
}; 

また、イベントリスナーを削除しようとしましたが、配置する場所を特定できませんでした。

document.body.removeEventListener('mousewheel', preventWindowScroll); 
document.body.removeEventListener('DOMMouseScroll', preventWindowScroll); 

ユーザーがメインウィンドウのスクロールをクリックしたときに検出できるのであれば、eitは意図したとおりに動作します。

注：メインウィンドウのスクロールを他の方法で一時停止しましたが、すべてにはわずかな欠点があります。

ありがとうございました

Answer 1

私はこのコードを使用します。 Chromeで動作します。

yourTable.addEventListener('wheel', handleMouseScroll); 

function handleMouseScroll(e) { 

    var delta = e.deltaY || e.detail || e.wheelDelta; 

    if (delta < 0 && this.scrollTop == 0) { 
    e.preventDefault(); 
    } 
    if (delta > 0 && this.scrollHeight - this.clientHeight - this.scrollTop <= 1) { 
    e.preventDefault(); 
    } 
}