gpt4 book ai didi

jquery - Iscroll5 不会水平滚动,宽度(每张幻灯片)100% 也分配给类(多用途)

转载 作者:行者123 更新时间:2023-11-28 08:59:36 24 4
gpt4 key购买 nike

我在使用 Iscroll5 时遇到一些问题,它不能水平滚动。我正在尝试做什么。

1.) 分配给类,所以我可以多次使用它(我已经可以通过推送数组来完成这部分)

2.) 将每张幻灯片设置为 100% 宽度(我已经可以使用 iscroll-fix.js 完成这部分)

3.) 但是当我将两者组合在一起时,它不会水平滚动,而只会垂直滚动。想知道这是否是 CSS 问题。

我这样做是因为我正在将动态数据加载到 iscroller 中,所以我不知道大小和数量。

fiddle :http://jsfiddle.net/GuCC2/28/

这是我的代码。

HTML:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/style2.css">
<script src="js/iscroll-fix.js"></script>
<script src="js/iscroll.js"></script>

<script src="js/script.js"></script>
<script src="js/jquery-1.11.1.js"></script>
<script src="js/jquery.mobile-1.4.4.min.js"></script>

</head>

<body>

<script>

$(function loaded () {

var scroller = new Array();

$('.myclass').each(function(){

myScroller = new IScroll(this, {
scrollX: true,
scrollY: true,
snap:true,
});

scroller.push(myScroller);
});

});
loaded();

</script>
<div class="myclass">
<div id="scroller">
<div class="slide" style="background-color:red;"></div>
<div class="slide" style="background-color:green;"></div>
<div class="slide" style="background-color:blue;"></div>
<div class="slide" style="background-color:yellow;"></div>
</div>
</div>
<br />
<h1>Scrolls using scrollWidth fix</h1>
<div class="myclass">
<div id="scroller">
<div class="slide" style="background-color:red;"></div>
<div class="slide" style="background-color:green;"></div>
<div class="slide" style="background-color:blue;"></div>
<div class="slide" style="background-color:yellow;"></div>
</div>
</div>

</body>
</html>

CSS

   .slide {
width:100%;
height:242px;
display:inline-block;
}
#wrapper, .myclass{
height:242px;
width:100%;
white-space: nowrap;
overflow:hidden;
position:relative;
}
.scroller {
position:relative;
}

最佳答案

添加数据后是否刷新iscroll?添加动态数据后,iscroll 包装器的宽度和高度将发生变化,您必须触发它的刷新事件。 myScroller.refresh();

关于jquery - Iscroll5 不会水平滚动,宽度(每张幻灯片)100% 也分配给类(多用途),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26983978/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com