Struggling to implement a horizontal scrolling feature (via mousewheel) for both containers in the code below. I want this feature to be easily applied to any future container creations as well.
<body>
<style>
#container {
display: flex;
overflow-x: scroll;
max-width: 100rem;
margin: 0 auto;
}
#container p {
font-family: sans-serif;
border-radius: 8px;
background: #ff6961;
color: black;
padding: 2rem 3rem;
margin: 2rem 1rem;
}
</style>
<h1> Hello World! </h1>
<br>
<h2>Container Title</h2>
<div id="container">
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
<p>10</p>
<p>11</p>
<p>12</p>
<p>13</p>
</div>
<h2>Container 2 Title</h2>
<div id="container">
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
<p>10</p>
<p>11</p>
<p>12</p>
<p>13</p>
</div>
</html>
<script>
const elements = document.querySelectorAll(".container");
elements.forEach((element) => {
element.addEventListener('wheel', (event) => {
event.preventDefault();
element.scrollBy({
left: event.deltaY < 0 ? -30 : 30,
});
});
});
</script>
</body>
Created a dynamic horizontal scrolling method utilizing the mousewheel. Unfortunately, it only works on the first container and not on subsequent containers. Looking to make this functionality universally applicable to all containers moving forward.