javascript - 容器内水平滚动

Question

我是 javascript 的新手，我正在尝试创建一个水平滚动的 div :-

JSfiddle

如您所见，菜单链接指向每种颜色，但我想将它放在一个 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>

Answer 1

如@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 )