我的HTML就像这样
<body>
<div id="next" style="postion:fixed;">Next<br><br></div>
<div id="container">
<div id="cont">
<div class="Element" style="background:blue; left:0; "></div>
<div class="Element" style="background:orange; left:100%;"></div>
<div class="Element" style="background:pink; left:200%;"></div>
</div>
</div>
我的js for scroll-left
$('#next').click(function() {
$('#container').animate({
scrollLeft: $('#container').scrollLeft() + 400
});
});
CSS
#container{
overflow-x:hidden;
overflow-y:hidden;
}
.Element{
width:100%;
height:50%;
position:absolute;
height:50%;
}
我尝试使用带有position:absolute功能的scrollLeft显示div标签。但是，对于position:absolute，scrolllleft无效。但position:relative工作正常。我想用滚动选项显示位置绝对的div标签？我该怎么办？
的jsfiddle
答案 0 :(得分：5)
您的#container元素需要设置类似overflow: auto的{{3}}属性才能使元素可滚动。默认情况下，overflow为visible，表示该元素不会滚动。您还需要向#container添加定位，并设置width和height。
overflow）：
$('#next').click(function() {
$('#container').animate({
scrollLeft: $('#container').scrollLeft() + 400
});
});.Element {
padding:0px;
width:100%;
position:absolute;
height:100%;
}
#container {
position: relative;
width: 400px;
height: 200px;
overflow: auto;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="next" style="postion:fixed;">Next
<br>
<br>
</div>
<div id="container">
<div id="cont">
<div class="Element" style="background:blue; left:0;">aaa</div>
<div class="Element" style="background:orange; left:100%;">bbb</div>
<div class="Element" style="background:yellow; left:200%;">ccc</div>
</div>
</div>
答案 1 :(得分：0)
使用以下代码向左滚动。
$('#next').click(function() {
$('html, body').animate({
scrollLeft: 500
}, 800);
});
其中500是保证金，800是速度。
编辑：
如果你想将容器移到左边。使用以下代码。
$('#next').click(function() {
$("#container").animate({
'marginLeft': '-=450px'
}, 500);
});