jQuery自定义内容滚动器：删除鼠标滚动
[英]jQuery custom content scroller: remove mouse scrolling
问题描述
我遇到了麻烦，想知道是否有人可以帮忙？ 我已经将jQuery自定义内容滚动条集成到我的网站中（链接： http : //manos.malihu.gr/jquery-custom-content-scroller/ ）。 该插件很棒，并且是我需要的一切，但是我想知道使用此插件时是否有防止鼠标滚动的方法？ 因此，基本上，用户只能使用滚动条，而不是使用鼠标滚动。 这是我到目前为止的代码：
<head> <!-- stylesheet for demo and examples --> <link rel="stylesheet" href="style.css"> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> <![endif]--> <!-- custom scrollbar stylesheet --> <link rel="stylesheet" href="jquery.mCustomScrollbar.css"> </head> <body> <center> <table style="width:100%; height:auto; max-width:1200px; border-bottom:1px solid #c4c4c4;"> <tr> <td> title 1 </td> <td style="text-align:right;"> title 2 </td> </tr> <tr> <td colspan="2"> <br /> <div id="demo" style="padding-left:0x;"> <!-- content --> <div id="content-1" class="content horizontal-images" style="background-color:white; padding:0px; height:120px;"> <ul> <li><img style="height:70px; width:auto; padding-right:13px; background-color:white;" src="tester.png" /></li> <li><img style="height:70px; width:auto; padding-right:13px; background-color:white;" src="tester.png" /></li> <li><img style="height:70px; width:auto; padding-right:13px; background-color:white;" src="tester.png" /></li> <li><img style="height:70px; width:auto; padding-right:13px; background-color:white;" src="tester.png" /></li> <li><img style="height:70px; width:auto; padding-right:13px; background-color:white;" src="tester.png" /></li> <li><img style="height:70px; width:auto; padding-right:13px; background-color:white;" src="tester.png" /></li> <li><img style="height:70px; width:auto; padding-right:13px; background-color:white;" src="tester.png" /></li> <li><img style="height:70px; width:auto; padding-right:13px; background-color:white;" src="tester.png" /></li> <li><img style="height:70px; width:auto; padding-right:13px; background-color:white;" src="tester.png" /></li> <li><img style="height:70px; width:auto; padding-right:13px; background-color:white;" src="tester.png" /></li> <li><img style="height:70px; width:auto; padding-right:13px; background-color:white;" src="tester.png" /></li> <li><img style="height:70px; width:auto; padding-right:13px; background-color:white;" src="tester.png" /></li> <li><img style="height:70px; width:auto; padding-right:13px; background-color:white;" src="tester.png" /></li> <li><img style="height:70px; width:auto; padding-right:13px; background-color:white;" src="tester.png" /></li> <li><img style="height:70px; width:auto; padding-right:13px; background-color:white;" src="tester.png" /></li> </div> </div> </td> </tr> </table> </center> <!-- Google CDN jQuery with fallback to local --> <script>window.jQuery || document.write('<script src="../js/minified/jquery-1.11.0.min.js"><\\/script>')</script> <!-- custom scrollbar plugin --> <script src="jquery.mCustomScrollbar.concat.min.js"></script> <script> (function($){ $(window).load(function(){ /* get snap amount programmatically or just set it directly (eg "273") in this example, the snap amount is list item's (li) outer-width (width+margins) */ var amount=Math.max.apply(Math,$("#content-1 li").map(function(){return $(this).outerWidth(true);}).get()); $("#content-1").mCustomScrollbar({ axis:"x", theme:"inset", advanced:{ autoExpandHorizontalScroll:true }, scrollButtons:{ enable:true, scrollType:"stepped" }, keyboard:{scrollType:"stepped"}, snapAmount:amount, mouseWheel:{scrollAmount:amount} }); }); })(jQuery); </script> </body>
谢谢-非常感谢您的帮助:)
1 个解决方案
解决方案1
0 2015-08-10 15:21:38
$("#content-1").mCustomScrollbar({enable: false});
无法使用jQuery自定义内容滚动条向iframe添加自定义滚动条？
[英]Unable to add custom scrollbar to iframe using jQuery custom content scroller?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.