Geek Answers Handbook

Scrolling horizontally inside a container

I am new to javascript and I am trying to create a horizontal scroll div: -

Jsfiddle

As you can see, the menu links go to each color, but I would like to put it in a container of 250x250 pixels in size, so only one color will be visible, then you click on any link and scroll to that color.

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>
+4
source share
4 answers

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

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

After that you need to change JS a bit. You still want to scroll the offset element of this element, but you also need to take into account the current scroll position.

(To clarify, if you pressed orange - which originally had an offset of 250px , after the animation, the offset for the orange would be 0px and black would be 250px . If you then press black , it will try to scroll to 250px , which is an orange element.)

The updated JS will look here:

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

Demonstration violin: https://jsfiddle.net/bpxkdb86/4/

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

+3
source

A CSS , try adding this element to CSS,

 overflow-x: scroll;

That should do it for you.

+1
source

For this you need two changes.

First add height and width for the container, and then set the overflow in css.

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

The second jquery update for container animation, now it revitalizes the body.

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

JSFiddle is available in the following link

https://jsfiddle.net/jym7q0Lu/

+1
source

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

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

More articles:


All Articles