容器内的水平滚动 [英] horizontal scroll inside container

问题描述

我对javascript很新，我正在尝试创建一个水平滚动div： -

I'm pretty new to javascript and I'm trying to create a horizontal scrolling div :-

JSfiddle

正如您所看到的菜单链接指向每种颜色但我想把它放在一个250x250px的容器中，这样只有1种颜色可见，然后你点击任何一个链接就会滚动到那种颜色。

As you can see the menu links go to each colour but I would like to put this inside a container which is 250x250px so only 1 colour is visible, then you click on whichever link and it scrolls to that colour.

希望有人可以帮我一个几点指示。

Hope someone can help me with a few pointers.

谢谢！

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 （用作视口）。以下是最终CSS的样子：

As @Script47 mentioned, you'll want to apply overflow-x as a CSS property to your element, in addition the width (to act as a viewport). Here's what your final CSS might look like:

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

之后，你需要稍微修改你的JS。你仍然想要滚动到元素的偏移量，但你还需要考虑你当前的滚动 position。

After that, you'll need to modify your JS slightly. You'll still want to scroll to the offset of the element, but you'll also need to take into account your current scroll position.

（澄清一下，如果你点击 orange - 最初的偏移量 250px ，动画后，橙色的偏移量为 0px ，黑色将 250px 。如果您再点击 black ，它将尝试滚动到 250px ，这是橙色元素。）

(To clarify, if you clicked orange - which has an offset initially of 250px, post-animation, the offset for orange would be0px, and black would be250px. If you then click black, it will attempt to scroll to 250px, which is the orange element.)

以下是更新后的JS的样子：

Here's what the updated JS might look like:

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/

对于小提琴，我删除了物理<$ c $使用<！ - comments - > 在HTML中使用c> white-space （以防止div之间有空格） ，并将 position：relative 添加到包含元素（使用 position ）

For the fiddle, I removed physical white-space in the HTML (to prevent the divs from having space between them) using <!-- comments -->, and also added position: relative to the containing element (to use position)

这篇关于容器内的水平滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！