javascript - 将鼠标滚轮作用到特定的 div

Question

我有以下水平列表，其中填充了许多图像:

<ul id="q" class="list-inline" style="white-space:nowrap; overflow-x:scroll; padding:5px;">
    <li v-for="index in (0,20)" :key="index" style="display:inline;" class="list-inline-item"><img :src="`${$route.params.img}`" style="width:100px; height:100px;"/></li>
</ul>

我为这个列表创建了一个鼠标滚轮监听器:

$('#q').bind('mousewheel', function(e){
    if(e.originalEvent.wheelDelta/120 > 0) {
        console.log("Up")
    }
    else{
        console.log("Down")
    }
});

只有当鼠标指针位于此 ul 元素上时，我如何才能将鼠标滚轮限制到此容器(防止实际窗口由于鼠标滚轮行为而上下移动)同时当它离开这个特定容器时恢复实际的鼠标滚轮行为？

Answer 1

$('#q').bind('mousewheel', function(e){
    e.preventDefault(); // <- stops the mouse wheel event from scrolling the page
    if(e.originalEvent.wheelDelta/120 > 0) {
        console.log("Up")
    }
    else{
        console.log("Down")
    }
});