gpt4 book ai didi

javascript - 使用绝对位置时,jQuery 向左滚动不起作用?

转载 作者:太空宇宙 更新时间:2023-11-04 15:04:46 26 4
gpt4 key购买 nike

我的 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 用于向左滚动

$('#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%;
}

我尝试使用 scrollLeft 函数显示带有 position:absolute 的 div 标签。但是 scrollleft 不适用于 position:absolute。但是 position:relative 可以正常工作。我想显示带有滚动选项的绝对位置的 div 标签?我该怎么做?

JSFiddle

http://jsfiddle.net/aja_aja/s9snvk5s/9/

最佳答案

您的 #container 元素需要有 overflow属性设置类似 overflow: auto 的内容以使元素可滚动。默认情况下,overflowvisible,这意味着元素不会滚动。您还需要向 #container 添加定位,并设置 widthheight

工作示例(JSFiddle):

$('#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>

关于javascript - 使用绝对位置时,jQuery 向左滚动不起作用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29272384/

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