禁用 ListBox 上的鼠标滚轮滚动答案

【问题标题】：Disable mouse wheel scrolling on ListBox禁用 ListBox 上的鼠标滚轮滚动
【发布时间】：2014-04-24 06:26:09
【问题描述】：

我在 MVC 页面上有一个 ListBox：

@Html.ListBox("lstFacilitySelection", Model.FacilityOptionList, new { id = "FacilityListBox", Multiple = "multiple", Size = 5, style = "width: 50%;" })

如何禁用此 ListBox 的鼠标滚轮滚动，以便必须使用控件侧面的滚动条？

编辑： Ashwini Verma 提出的解决方案稍作修改：

$(document).ready(function () {
    $('#FacilityListBox').on({
        'mousewheel': function (e) {
            if (e.target.id == 'el') return;
            e.preventDefault();
            e.stopPropagation();
        }
    })
});

【问题讨论】：

我建议至少添加javascript 标签以获得更多关注。简短的回答是，这并不容易实现。我怀疑它需要大量的 javascript 和 CSS 技巧。您可能必须使用模拟多选而不是内置 HTML 组件本身的东西。

标签： javascript css asp.net-mvc razor scroll

【解决方案1】：

您可以使用 jquery 禁用它。 See working demo here.

<div class="scrollable"> </div>

$(document).ready(function(){    
    $('body').on({
        'mousewheel': function(e) {
            if (e.target.id == 'el') return;
            e.preventDefault();
            e.stopPropagation();
        }
    })
});

【讨论】：

谢谢，虽然我会修改它以仅在所需控件上禁用滚动，而不是整个页面然后指定某些部分可滚动。我会将此附加到我的问题中。