Question

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

正如你可以看到菜单链接转到每种颜色，但我想把它放在一个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之间有空格），并且还将position: relative添加到包含元素（到使用position）

Answer 2

CSS解决方案，尝试将此添加到CSS中的元素

overflow-x: scroll;

这应该为你做。

Answer 3

您需要进行两项更改才能发挥作用。

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

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

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

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

JSFiddle在以下链接中是可用的

https://jsfiddle.net/jym7q0Lu/

Answer 4

just use a css if you want your div to be scrollable..

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

容器

4 个答案: