Scroll Right JavaScript

303

19 января 2018, 23:21

Добрый вечер! Есть контейнер 1024x768 в нем блоки 220x220, скролл горизонтальный!

Как реализовать, чтобы скролл при появлении был всегда вправо???

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

Answer 1

В jQuery есть метод scrollLeft. Это позиция горизонтального скролла. Надо просто ему передать значение ширины самого элемента.

$(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>

Вот и второй вариант на чистом 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>