Как я могу связать кнопку на клик, чтобы скользить к следующей панели по горизонтали - PullRequest
Новая
       56

Как я могу связать кнопку на клик, чтобы скользить к следующей панели по горизонтали

0 голосов
/ 26 сентября 2019

Прямо сейчас моя веб-страница имеет вертикальную привязку для прокрутки к каждой из трех секций по 100vh.

Во втором разделе у меня есть 3 div по 100vw, выровненных горизонтально с {overflow-x: scroll}.Поэтому я попытался связать мою кнопку, которая поможет перевести x, используя следующий код: 



const button = document.getElementById('slide');

button.onclick = function () {
  document.getElementById('wrapper').scrollLeft += 20;
};

Полагаю, сейчас цифры не имеют значения.Я просто хочу, чтобы он двигался, но я не могу заставить его двигаться по щелчку.Есть идеи? 

codepen.io/brandoniscool/pen/vYBMZyM

1 Ответ

1 голос
/ 27 сентября 2019

300% ширина установлена ​​на обертке, поэтому прокручивать должен родительский элемент обертки (id special).
Установка scrollLeft для специального элемента работает как положено.document.getElementById('special').scrollLeft += 20; 

const button = document.getElementById('slide');

button.onclick = function () {
  document.getElementById('special').scrollLeft += 20;
};
* {
	margin: 0;
	font-family: 'Montserrat', sans-serif;}

body {
  scroll-snap-type: y mandatory;
  overflow-x: hidden;
  width: 100vw;
  height: 100%;

}

section {
	scroll-snap-align: start;
	height: 100vh;
	outline: 1px dashed lightgray;
	background-color: #c1d37f;
	overflow-x: scroll;
}



.verticalSection {
	display: flex;
	justify-content: center;
	flex-direction: row;
	height: inherit;
	border: 0.5px dashed #664e4c;
	box-sizing: border-box;
	 /* so the border doesnt increase over the 100% width and heights */
}


#wrapper {
	height: 100%;
	width: 300%;
	display: flex;
}

.horizontalSection {
	
	background-color: #f9d4bb;
	height: 100%;
	width: 100%;
	display: flex;
	justify-content: center;
	flex-direction: row;
	border: 0.5px dashed #664e4c;
	box-sizing: border-box; /* so the border doesnt increase over the 100% width and heights */
}

h1 {
	color: #664e4c;
	font-size: 3em;
	margin: auto;
}
<!DOCTYPE html>
<html>
<head>
	<title>vertical snap and horizontal snap integration</title>
	<link rel="stylesheet" type="text/css" href="styles.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
	<script type="text/javascript" src="scripts.js"></script>
</head>
<body>
	<section>
		<div class="verticalSection"> <h1> BOX 1</h1> </div>
	</section>
	<section id="special">
		<div id="wrapper">
			
			<div class="horizontalSection"> <h1> BOX 2.1</h1> <button id="slide" type="button">Next</button></div>
			<div class="horizontalSection"> <h1> BOX 2.2</h1> </div>
			<div class="horizontalSection"> <h1> BOX 2.3</h1> </div>

		</div>
		
	</section>
	<section>
		<div class="verticalSection"> <h1> BOX 3</h1> </div>
	</section>
</body>
</html>
...