我是 javascript 的新手,我正在尝试创建一个水平滚动的 div :-
如您所见,菜单链接指向每种颜色,但我想将它放在一个 250x250 像素的容器中,因此只有一种颜色可见,然后您单击任一链接,它就会滚动到该颜色。
希望有人能帮我指点。
谢谢!
jQuery(document).ready(function ($) {
$(".scroll").click(function (event) {
event.preventDefault();
$('html,body').animate({
scrollLeft: $(this.hash).offset().left
}, 200);
});
});
.container {
white-space: nowrap;
}
.child-element {
min-width: 250px;
display: inline-block;
height: 250px;
}
.child1 {
background-color: purple;
}
.child2 {
background-color: orange;
}
.child3 {
background-color: black;
}
.child4 {
background-color: green;
}
.child5 {
background-color: blue;
}
.child6 {
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a href="#purple" class="scroll">PURPLE</a>
<a href="#orange" class="scroll">ORANGE</a>
<a href="#black" class="scroll">BLACK</a>
<a href="#green" class="scroll">GREEN</a>
<a href="#blue" class="scroll">BLUE</a>
<a href="#red" class="scroll">RED</a>
<div class="container">
<div id="purple" class="child-element child1"></div>
<div id="orange" class="child-element child2"></div>
<div id="black" class="child-element child3"></div>
<div id="green" class="child-element child4"></div>
<div id="blue" class="child-element child5"></div>
<div id="red" class="child-element child6"></div>
</div>
最佳答案
如@Script47 所述,您需要申请 overflow-x
作为元素的 CSS 属性,此外还有 width
(充当视口(viewport))。您的最终 CSS 可能如下所示:
.container {
white-space: nowrap;
overflow-x: scroll;
width: 250px;
position: relative;
}
之后,您需要稍微修改您的 JS。您仍然需要滚动到 offset
的元素,但您还需要考虑当前的 scroll
位置。
(澄清一下,如果您单击了 orange
- 初始偏移量为 250px
,动画后,橙色的偏移量将为 0px
,而 black
将为 250px
。如果您然后点击 black
,它会尝试滚动到 250px
,这是橙色元素。)
这是更新后的 JS 的样子:
jQuery(document).ready(function ($) {
$(".scroll").click(function (event) {
var current = $('.container').scrollLeft();
var left = $(this.hash).position().left;
event.preventDefault();
$('.container').animate({
scrollLeft: current + left
}, 200);
});
});
用于演示的 fiddle :https://jsfiddle.net/bpxkdb86/4/
对于 fiddle ,我删除了物理 white-space
在 HTML 中(以防止 div 之间有空格)使用 <!-- comments -->
, 并且还添加了 position: relative
到包含元素(使用 position
)
关于javascript - 容器内水平滚动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31867646/