Question

我遇到了麻烦，想知道是否有人可以帮忙吗？我已将jQuery自定义内容滚动条集成到我的网站中（链接：http://manos.malihu.gr/jquery-custom-content-scroller/）。插件很棒，是我需要的一切 - 但是我想知道在使用这个插件时是否有办法阻止鼠标滚动？所以基本上用户只能使用滚动条而不是使用鼠标滚动。这是我到目前为止的代码：

＆＃13;

<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 (e.g. "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>

＆＃13;

谢谢 - 非常感谢任何帮助:)

Answer 1

$("#content-1").mCustomScrollbar({enable: false});

jQuery自定义内容滚动条：删除鼠标滚动

1 个答案: