-1

I have a parent container with a lot of divs as children.

The parent container has horizontal scroll.

How can I onclick scroll to the end of the child div if it is fully not visible?

It should works for both directions.

JS/jQuery/CSS

Example here: https://jsfiddle.net/04mzhagr/

    .parent{
      width:100%;
      white-space: nowrap;
      overflow-y: hidden;
      overflow-x: scroll;
    }
    .child{
      display:inline-block;
      padding:10%;
      background-color:blue;
      margin:10px;
    }
<div class='parent'>
         <div class='child'> test</div>
         <div class='child'> test</div>
         <div class='child'> test</div>
         <div class='child'> test</div>
         <div class='child'> test</div>
         <div class='child'> test</div>
         <div class='child'> test</div>
         <div class='child'> test</div>
         <div class='child'> test</div>
         <div class='child'> test</div>
         <div class='child'> test</div>
         <div class='child'> test</div>
         <div class='child'> test</div>
         <div class='child'> test</div>
         <div class='child'> test</div>
         <div class='child'> test</div>
         <div class='child'> test</div>
         <div class='child'> test</div>
         <div class='child'> test</div>
         <div class='child'> test</div>
         <div class='child'> test</div>
         <div class='child'> test</div>
         <div class='child'> test</div>
         <div class='child'> test</div>
         <div class='child'> test</div>
    </div>
theoretisch
  • 1,718
  • 5
  • 24
  • 34
Lev Kozak
  • 23
  • 1
  • 7

1 Answers1

0
<div id='parent' class='parent'>
  <div class='child'> test</div>
  <div class='child'> test</div>
  <div class='child'> test</div>
  <div class='child'> test</div>
</div>

<script>
    var parent = document.getElementById("parent");
    parent.scrollLeft = parent.scrollWidth;
</script>

https://jsfiddle.net/bendela6/v7609Lw0/

user1990
  • 49
  • 1
  • 4
  • Yeah, it does not works )))) – Lev Kozak Dec 05 '16 at 08:47
  • Your example does not working because you did not write onclick function, even if we add that function your code could not work because parent element does not have scrollLeft property. – Lev Kozak Dec 05 '16 at 10:38