鼠标滚轮无法使用(mCustomScrollbar jQuery插件)

6

我正在寻找解决方案,但是找不到。所以我下载了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;
}

如果有人能帮助我,我会等待消息。


我没有足够的积分... - user242302
2个回答

10

9
为了处理鼠标滚轮事件,mCustomScrollbar 使用了 jquery.mousewheel.js 脚本,该脚本应在滚动条之前被包含。它被包含在合并版本中,但没有被包含在压缩版本中。 - Gromo
2
仅供参考,如果有人正在使用requireJS并遇到此问题,请参考github上的此线程(您还必须加载jquery.mousewheel.js)- 即使您的测试页面(具有相同js文件且不使用require)正常工作。 - Carlos Valencia

0
尝试在webpack中解决这个问题,我正在注释mCustomSrollBar.js文件中的一些行。
问题在于该文件无法找到路由以加载mousewheel文件的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();
}

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接