<html>
<head>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/iscroll.js"></script>
<script type="text/javascript" src="js/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="js/jquery-ui.css" />
<link rel="stylesheet" type="text/css" href="css/drag.css" />
<script type="text/javascript">
$(document).ready(function(){
var myScroll;
function loaded() {
myScroll = new iScroll('wrapper');
}
document.addEventListener('DOMContentLoaded', loaded, false);
});
</script>
</head>
<body>
<div id="wrapper" style="overflow: hidden; ">
<div id="scroll" style="-webkit-transition: -webkit-transform 0ms; -webkit-transform-origin: 0px 0px; -webkit-transform: translate3d(0px, 0px, 0px);" >
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
<li>c</li>
<li>c</li>
<li>c</li>
<li>c</li>
<li>c</li>
<li>c</li>
<li>c</li>
<li>c</li>
<li>c</li>
<li>c</li>
<li>c</li>
<li>d</li>
</ul>
</div>
<div class="myScrollbarV" style="pointer-events: none; -webkit-transition: opacity 0ms 0ms; overflow: hidden; opacity: 1; ">
<div style="pointer-events: none; -webkit-transition: -webkit-transform 0ms cubic-bezier(0.33, 0.66, 0.66, 1); height: 40px; -webkit-transform: translate3d(0px, 221px, 0px); ">
</div>
</div>
</div>
</body>
</html>
以上是我的iscroll4的HTML代码,我正在使用以下CSS:
.wrapper{
position: absolute;
z-index: 1;
top: 45px;
bottom: 48px;
left: 0;
width: 100%;
background: #AAA;
overflow: auto;
}
.scroll{
position: relative;
-webkit-tap-highlight-color: rgba(0,0,0,0);
float: left;
width: 100%;
padding: 0;
}
.div2{
list-style-type:none;
}
.myScrollbarV {
position:absolute;
z-index:100;
width:8px;bottom:7px;top:2px;right:1px
}
.myScrollbarV > div {
position:absolute;
z-index:100;
width:100%;
/* The following is probably what you want to customize */
background:-webkit-gradient(linear, 0 0, 100% 0, from(#f00), to(#900));
background-image:-moz-linear-gradient(top, #f00, #900);
background-image:-o-linear-gradient(top, #f00, #900);
border:1px solid #900;
-webkit-background-clip:padding-box;
-moz-background-clip:padding-box;
-o-background-clip:padding-box;
background-clip:padding-box;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-o-box-sizing:border-box;
box-sizing:border-box;
-webkit-border-radius:4px;
-moz-border-radius:4px;
-o-border-radius:4px;
border-radius:4px;
-webkit-box-shadow:inset 1px 1px 0 rgba(255,255,255,0.5);
-moz-box-shadow:inset 1px 1px 0 rgba(255,255,255,0.5);
-o-box-shadow:inset 1px 1px 0 rgba(255,255,255,0.5);
box-shadow:inset 1px 1px 0 rgba(255,255,255,0.5);
}
我只能查看红色滚动但无法滚动它。有人可以帮帮我吗? iscroll的CSS部分有什么问题吗?我使用this作为参考来实现我的滚动。
答案 0 :(得分:0)
首先要做的事情是:你不需要声明var myScroll;
,事实上,你不应该。您应该将iScroll绑定到窗口对象,以便在必要时可以解除分配,以便检查/调试其行为。
在浏览器中设置一个javascript断点(Break on Next按钮应该可以工作)并检查你的window.myScroll对象。有时,iScroll认为其滚动条或包装器的计算高度为零,除非它是手动设置的,因此它会自动禁用vScroll和hScroll。
尝试在调整CSS后在javascript控制台中手动执行window.myScroll.refresh();
,最终应该开始滚动。然后在drag.css文件中进行浏览器中的CSS更改。
(PS:如果您愿意,也可以从滚动条和包装中删除内联样式,因为iScroll会自动应用这些样式)