3

我正在使用 jQuery自定义滚动条来显示一堆带有按钮的块。这些按钮具有警报脚本，可在单击每个按钮时显示一条消息。最初可见的按钮工作正常，如下所示

在此处输入图像描述

但在滚动下一个按钮后[图像 2] [ 在此处输入图像描述] 3

没有显示警报，而是跳过滚动条布局开始如下所示 在此处输入图像描述

请帮我解决这个问题。下面我添加了整个 html 内容，用整页运行代码片段

<!DOCTYPE html>
<!--[if IE 8 ]><html lang="en" class="ie8"><![endif]-->
<!--[if IE 9 ]><html lang="en" class="ie9"><![endif]-->
<!--[if (gt IE 9)|!(IE)]><!-->
<html lang="en">
<!--<![endif]-->
<head>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<title>jQuery custom scrollbar demo</title>
	<meta name="viewport" content="width=device-width, initial-scale=1" />
	<!-- stylesheet for demo and examples -->
	<style>
		body{ background:#eee; font-family:arial, sans-serif; font-size:1em; line-height:1.6em; }
		h1{ margin:40px 0; }
		h1 small{ font-size:.5em; }
		hr{ border-top:0; border-bottom:1px solid #ccc; }
		a{ color:#0d75ca; }
		a:hover{ text-decoration:none; }
		header, #demo, footer{ width:70%; margin:0 auto; }
		footer p > a{ margin-right:20px; }
	</style>
	<!--[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="http://malihu.github.io/custom-scrollbar/jquery.mCustomScrollbar.min.css">

	<style>
		/* mobile first */
		#content-1{
			width: 260px;
			height: 400px;
			overflow: hidden;
			background: #fdfdfd;
			padding: 10px;
			margin: 20px 0;
		}
		#content-1 ul{
			width: 230px;
			margin: 0;
			padding: 0;
			list-style: none;
			overflow: hidden;
		}
		#content-1 li{
			width: 200px;
			height: 120px;
			margin: 5px;
			padding: 5px 10px;
			background: #dbf3f7;
		}
		@media only screen and (min-width: 1024px){
			#content-1{
				width: 80%;
				height: 170px;
			}
			#content-1 ul{ width: auto; }
			#content-1 li{ float: left; }
		}
	</style>

</head>

<body>
	<header>
		<h1>custom scroller test</h1>
	</header>

	<div id="demo">
		<section id="examples">

			<!-- content -->
			<div id="content-1">
				<ul>
					<li>First</li>
					<li>Second</li>
					<li>Third</li>
					<li>Fourth</li>
					<li><button type="button" name="button" onclick="mycall()">call</button></li>
					<li>Sixth</li>
					<li>Seventh</li>
					<li><button type="button" name="button" onclick="mycall()">call</button></li>
					<li>Eigth</li>
					<li>Ninth</li>
					<li><button type="button" name="button" onclick="mycall()">call</button></li>
					<li>Eleventh</li>
					<li>Twelfth</li>
					<li>Thirteenth</li>
					<li>Last</li>
				</ul>
			</div>

		</section>
	</div>

	<footer>

	</footer>

	<!-- Google CDN jQuery with fallback to local -->
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
	<script>window.jQuery || document.write('<script src="../js/minified/jquery-1.11.0.min.js"><\/script>')</script>

	<!-- custom scrollbar plugin (latest version) via Github with fallback to local -->
	<script src="http://malihu.github.io/custom-scrollbar/jquery.mCustomScrollbar.concat.min.js"></script>
	<script>window.mCustomScrollbar || document.write('<script src="../jquery.mCustomScrollbar.concat.min.js"><\/script>')</script>

	<script>
		(function($){

			$(window).load(function(){

				$("#content-1").mCustomScrollbar({
					theme:"inset-2-dark",
					axis:"x",
					advanced:{autoExpandHorizontalScroll:true},

					/* change mouse-wheel axis on-the-fly */
					callbacks:{
						onOverflowY:function(){
							var opt=$(this).data("mCS").opt;
							if(opt.mouseWheel.axis!=="y") opt.mouseWheel.axis="y";
						},
						onOverflowX:function(){
							var opt=$(this).data("mCS").opt;
							if(opt.mouseWheel.axis!=="x") opt.mouseWheel.axis="x";
						},
					}
				});

			});

		})(jQuery);
	</script>
  <script type="text/javascript">
    function mycall(){
      alert("test");
    }
  </script>
</body>
</html>

4

0 回答 0