How can I link button onclick to slide to the next panel horizontally

Right now my webpage has vertical snap to scroll to each of the three 100vh sections.

In the second section, I have 3 100vw divs lined up horizontally with { overflow-x: scroll }. So I went ahead and try to link the my button that would help translate x using the following code:



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

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

I guess right now the numbers doesn't matter. I just want to see it moving, but I can't get it to move on-click. Any ideas?

codepen.io/brandoniscool/pen/vYBMZyM

Solution

300% width is set on the wrapper, so it is the wrapper parent (id special) which needs to scroll.
Setting scrollLeft on the special element works as expected. 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>