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")
    }
});

范围鼠标滚轮到特定div

1 个答案: