我的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
});
});
&#13;
.Element {
padding:0px;
width:100%;
position:absolute;
height:100%;
}
#container {
position: relative;
width: 400px;
height: 200px;
overflow: auto;
}
&#13;
<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>
&#13;
答案 1 :(得分:0)
使用以下代码向左滚动。
$('#next').click(function() {
$('html, body').animate({
scrollLeft: 500
}, 800);
});
其中500是保证金,800是速度。
编辑:
如果你想将容器移到左边。使用以下代码。
$('#next').click(function() {
$("#container").animate({
'marginLeft': '-=450px'
}, 500);
});