鼠标滚轮不起作用（mCustomScrollbar jQuery 插件）答案

【问题标题】：Mousewheel doesn't working (mCustomScrollbar jQuery plugin)鼠标滚轮不起作用（mCustomScrollbar jQuery 插件）
【发布时间】：2014-06-10 18:09:16
【问题描述】：

我正在为我的问题寻找解决方案，但找不到。所以我下载了 jQuery 插件（mCustomScrollbar），没有一件事一切都很好 - 我无法在我的测试页面中通过鼠标滚轮滚动。控制台很清楚，作者作品中的例子。我尝试在最新的 Firefox 和 Chrome 中运行我的代码，但代码不起作用。

我的代码：

HTML：

<div id="elements">
    <p>Elementy</p>
    <div id="list">
        xxx<br />xxx<br />
        abc<br />def<br />ghi<br />jkl<br />abc<br />def<br />ghi<br />jkl<br />abc<br />def<br />ghi<br />jkl<br />abc<br />def<br />ghi<br />jkl<br />
    </div>
</div>

JS：

$(document).ready(function(){
    $('div#elements').mCustomScrollbar({
        axis:'y',
        theme:'dark',
        mouseWheel:{
            enable:true,
            scrollAmount:5
        }
    }); 
});

CSS：

div#elements {
    background-color:#fff;
    border:1px solid #000;
    height:350px;
    position:absolute;
    right:10%;
    top:20%;
    width:230px;
    z-index:2;
}
div#elements p {
    border-bottom:1px solid #000;
    cursor:default;
    margin:0;
    padding:8px 0;
    text-align:center;
}

如果有人可以帮助我，我会等待消息。

【问题讨论】：

我没有足够的积分...

标签： javascript jquery html css jquery-plugins

【解决方案1】：

好的，我找到了解决方案。所以我必须使用 concat 版本的代码。

那么你将使用http://malihu.github.io/custom-scrollbar/jquery.mCustomScrollbar.concat.min.js，而不是http://malihu.github.io/custom-scrollbar/jquery.mCustomScrollbar.min.js。这很愚蠢，但它有效。

问候

【讨论】：

处理鼠标滚轮 mCustomScrollbar 使用 jquery.mousewheel.js 脚本，该脚本应包含在滚动条之前。它包含在 concat 版本中，但不包含在缩小版本中。
作为参考，如果有人在使用 requireJS 并遇到此问题，请参阅 github 上的 this thread（您还必须加载 jquery.mousewheel.js） - 即使您的测试页面（使用相同的 js 文件且不使用 require）工作正常

【解决方案2】：

尝试在 webpack 中解决这个问题，我在 mCustomSrollBar.js 文件中注释了一些行。

问题在于该文件找不到指向 node_modules 文件夹的路径以加载鼠标滚轮文件，因此有一个快速的解决方案：

function(init){
    var _rjs=typeof define==="function" && define.amd, /* RequireJS */
        _njs=typeof module !== "undefined" && module.exports, /* NodeJS */
        _dlp=("https:"==document.location.protocol) ? "https:" : "http:", /* location protocol */
        _url="cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.13/jquery.mousewheel.min.js";


    $.event.special.mousewheel || $("head").append(decodeURI("%3Cscript src="+_dlp+"//"+_url+"%3E%3C/script%3E"));

    // if(!_rjs){
        // if(_njs){
        //  require("jquery-mousewheel")($);
        // }else{
        //  /* load jquery-mousewheel plugin (via CDN) if it's not present or not loaded via RequireJS 
        //  (works when mCustomScrollbar fn is called on window load) */

        // }
    // }
    init();
}

【讨论】：