Mouse Scroll-X

by Sebastian Kay

HTML

<div class="container">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
	<div>6</div>
	<div>7</div>
	<div>8</div>
	<div>9</div>
</div>

CSS

body {
	margin: 0;
	width: 100vw;
	height: 100vh;
}

::-webkit-scrollbar {
  width: 0px;
}

.container {
	width: 100vw;
	height: calc(100vh + 18px);
  display: flex;
  flex-wrap: nowrap;
	overflow-x: scroll;
	overflow-y: hidden;
}

.container div {
	min-width: 100vw;
	height: 100%;
  display: flex;
	justify-content: center;
	align-items: center;
}

.container div:nth-child(1) {background: rgba(255, 255, 0, 0.1);}
.container div:nth-child(2) {background: rgba(255, 255, 0, 0.2);}
.container div:nth-child(3) {background: rgba(255, 255, 0, 0.3);}
.container div:nth-child(4) {background: rgba(255, 255, 0, 0.4);}
.container div:nth-child(5) {background: rgba(255, 255, 0, 0.5);}
.container div:nth-child(6) {background: rgba(255, 255, 0, 0.6);}
.container div:nth-child(7) {background: rgba(255, 255, 0, 0.7);}
.container div:nth-child(8) {background: rgba(255, 255, 0, 0.8);}
.container div:nth-child(9) {background: rgba(255, 255, 0, 0.9);}

JavaScript

const scrollContainer = document.querySelector(".container");

scrollContainer.addEventListener("wheel", (evt) => {
    evt.preventDefault();
    scrollContainer.scrollLeft += evt.deltaY;
});