Good evening! There is a 1024x768 container in it 220x220 blocks, horizontal scrolling!

How to implement, so that the scroll when appearing was always right ???

.main { width:1024px; height:768px; border:1px solid red; overflow-x: none; overflow-y: hidden; display: flex; flex-flow: wrap; flex-direction:column; } .item { width:220px; height:220px; background: green; border:1px solid blue; float:left; margin:10px; } 
 <div class="main"> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div>

  • You have inaccuracies in the styles, you use a float inside the flex-container, which is a priori incorrect. Sometimes for such tasks I use inline-block for child elements and the white-space: nowrap; property white-space: nowrap; at the parent. - ferrari
  • Thanks for the comment, but the float just forgot to remove =) - ntym

1 answer 1

jQuery has a scrollLeft method. This is the position of the horizontal scroll. You just need to pass the width of the element itself to it.

 $(document).ready(function(){ $('.main').scrollLeft($('.main').width()); }); 
 .main { width:1024px; height:768px; border:1px solid red; overflow-x: none; overflow-y: hidden; display: flex; flex-flow: wrap; flex-direction:column; } .item { width:220px; height:220px; background: green; border:1px solid blue; float:left; margin:10px; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="main"> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div>

Here is the second option in pure javascript .

 var element = document.getElementsByClassName('main')[0]; element.scrollLeft = element.offsetWidth; 
 .main { width:1024px; height:768px; border:1px solid red; overflow-x: none; overflow-y: hidden; display: flex; flex-flow: wrap; flex-direction:column; } .item { width:220px; height:220px; background: green; border:1px solid blue; float:left; margin:10px; } 
 <div class="main"> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div>

  • It is not necessary to do $('.main').width(); for ordinary tasks, I think $('.main').scrollLeft(9999); - ferrari
  • @ferrari What's the problem? The PC will hang from one method more? - Raz Galstyan
  • Especially not, but it will work about 4 times slower approximately. The comment was to ensure that the author and users know that you can set an infinitely large scrollLeft (or scrollTop) to be on the right (or bottom) of the block. And sometimes $.width() may not be enough when margins fall out for it, if you already calculate the width, then use $.outerWidth() - ferrari
  • @ferrari I don’t know how you make the calculations, but according to your calculations most of today's sites should be hung from one click or from one animation. - Raz Galstyan
  • Updated comments) - ferrari