horizontal scroll inside container

Question

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

JSfiddle

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.

Thanks!

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

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;
}

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.

(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.)

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);
    });
});

A fiddle to demonstrate: https://jsfiddle.net/bpxkdb86/4/

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)

Answer 2

A CSS solution, try adding this to you element in CSS,

overflow-x: scroll;

This, should do it for you.