在溢出時捕獲滾動事件：隱藏元素

Question

關於如何在具有overflow:hidden的元素上捕獲滾動事件的任何見解？ 我想在不向用戶顯示滾動條的情況下滾動列。

Answer 1

這實際上是一個有點深入的過程。 我所做的是在用戶鼠標進入和離開要滾動的元素時設置全局標志。 然后，在 body 的 mousewheel 事件上，我檢查 MOUSE_OVER 標志是否為真，然后停止事件的傳播。 這樣主體就不會滾動，以防整個頁面溢出。

請注意，隱藏溢出后，默認滾動功能將丟失，因此您必須自己創建它。 為此，您可以在有問題的 div 上設置鼠標滾輪偵聽器，並使用 event.wheelDelta 屬性檢查用戶是向上還是向下滾動。 該值因瀏覽器而異，但通常向下滾動時為負值，向上滾動時為正值。 然后，您可以相應地更改 div 的位置。

這段代碼很快就被破解了，但它本質上看起來像這樣......

var MOUSE_OVER = false;
$('body').bind('mousewheel', function(e){
  if(MOUSE_OVER){
    if(e.preventDefault) { e.preventDefault(); } 
    e.returnValue = false; 
    return false; 
  }
});

$('#myDiv').mouseenter(function(){ MOUSE_OVER=true; });
$('#myDiv').mouseleave(function(){ MOUSE_OVER=false; });

$('#myDiv').bind('mousewheel', function(e){
  var delta = e.wheelDelta;
  if(delta > 0){
    //go up
  }
  else{
    //go down
  }
});

Answer 2

$("body").css("overflow", "hidden")

$(document).bind('mousewheel', function(evt) {
    var delta = evt.originalEvent.wheelDelta
    console.log(delta)
})

為我工作。 改編自如何獲得wheelDelta 屬性？

Answer 3

我使用溢出：滾動，但也絕對在滾動條上放置一個 div 以隱藏它。

Answer 4

$("div").on('wheel', function (e) {
        if (e.originalEvent.deltaY < 0) {
        console.log("Scroll up");
    } else {
        console.log("Scroll down");
    }
});

這對我有用。 JSFiddle

堆棧小提琴：

 $("div").on('wheel', function(e) { if (e.originalEvent.deltaY < 0) { console.log("Scroll up"); } else { console.log("Scroll down"); } });

 div { height: 50px; width: 300px; background-color: black; overflow: hidden; }

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

Answer 5

我編輯了 @anson 對Vanilla Javascript的回答，因為它可能對其他人有用。 另請注意，不推薦使用“鼠標滾輪”事件。 所以我的代碼使用“ wheel ”代替。 接下來，我添加了箭頭函數，用於實際訪問“this”。

fixScrollBehavior(elem) {
                elem.addEventListener('scroll', (e) => {
                    console.log('scrolling');
                });

                let MOUSE_OVER = false;
                elem.addEventListener('wheel', (e) => {
                    if (MOUSE_OVER) {
                        if (e.preventDefault) {
                            e.preventDefault();
                        }
                        e.returnValue = false;
                        return false;
                    }
                });

                elem.addEventListener('mouseenter', () => {
                    MOUSE_OVER = true;
                });
                elem.addEventListener('mouseleave', () => {
                    MOUSE_OVER = false;
                });

                elem.addEventListener('wheel', (e) => {
                    let delta = e.wheelDelta;
                    if (delta > 0) {
                        //go up
                    } else {
                        //go down
                    }
                });
            }

請注意，這不會修復移動觸摸“滾動”。