容器内水平滚动

Question

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

如您所见，菜单 link 转到每种颜色，但我想将其放在 250x250px 的容器中，因此只有一种颜色可见，然后单击任何一种 link 并滚动到该颜色。

希望有人能帮我指点。

谢谢！

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

一个 CSS 解决方案，尝试将此添加到 CSS、

中的元素

overflow-x: scroll;

这个，应该为你做。

Answer 2

您需要进行两项更改才能正常工作。

首先为容器添加高度和宽度，然后在css中设置溢出。

width:250px;
height:250px;
overflow: auto;

第二次更新jquery 为容器设置动画，现在为主体设置动画。

$('.single-box').animate({

JSFiddle 在以下 link

中可用

https://jsfiddle.net/jym7q0Lu/

Answer 3

正如@Script47 提到的，除了 width（作为视口）。这是您的最终 CSS 可能的样子：

.container {
    white-space: nowrap;
    overflow-x: scroll;
    width: 250px;
    position: relative;
}

之后，您需要稍微修改您的 JS。您仍然希望滚动到元素的 offset，但您还需要考虑当前的 scroll 位置。

（澄清一下，如果您单击 orange - 其初始偏移量为 250px，post - 动画，橙色的偏移量将为 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，我使用  删除了 HTML 中的物理 white-space（以防止 div 之间有 space），并将 position: relative 添加到包含元素（使用 position）

Answer 4

如果您希望 div 可滚动，请使用 css..

   .container {
       white-space: nowrap;
       overflow-x: scroll;
       width: 250px;
       position: relative;
  }

容器内水平滚动

horizontal scroll inside container

javascript

css

jquery

horizontal-scrolling