容器内的水平滚动

Question

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

的jsfiddle

你可以看到菜单链接转到每种颜色,但我想把它放在一个250x250px的容器内,所以只有1种颜色可见,然后你点击任何一个链接,它滚动到那种颜色.

希望有人可以帮我指点几点.

谢谢!

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除了width(作为视口)之外,您还需要将CSS属性作为元素应用于元素.这是你最终的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);
    });
});

一个小提琴演示:https://jsfiddle.net/bpxkdb86/4/

对于小提琴,我删除white-space了HTML中的物理(以防止div之间有空格)使用<!-- comments -->,并且还添加position: relative到包含元素(使用position)