My HTML page includes a section for filter_options and content. The filter_options contains a list of options. I have set up scrolling functionality where scrolling vertically changes the horizontal scroll position of the options. However, this setup is also affecting the scroll behavior of the content area. How can I make sure that the scroll in the filter_options only works when it is being actively scrolled?
index.html
document.getElementById("options").addEventListener('mousewheel', function(e) {
if (e.wheelDelta > 0) {
this.scrollLeft -= 100;
} else {
this.scrollLeft += 100;
}
});body {
margin: 0;
}
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-track {
background: white;
}
::-webkit-scrollbar-thumb {
background: orange;
border-radius: 30px;
}
#filter_options {
width: 80%;
height: 100%;
position: fixed;
top: 0;
z-index: 2;
background-color: rgba(66, 60, 60, 0.13);
float: left;
overflow: scroll;
}
#filter_options div {
background-color: rgb(51, 51, 51);
text-align: center;
overflow: auto;
white-space: nowrap;
margin-top: 5%;
}
#filter_options div div {
color: white;
background-color: orange;
padding: 12px;
font-size: 20px;
font-family: "Comic Sans MS", cursive, sans-serif;
display: inline-block;
user-select: none;
}
#content {
height: 5000px;
width: 90%;
margin-left: 5%;
z-index: -1;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8>
<title>Document</title>
</head>
<body>
<div id="filter_options">
<div id="options">
<div>Option 1</div><div>Option 2</div><div>Option 3</div><div>Option 4</div><div>Option 5</div><div>Option 6</div><div>Option 7</div><div>Option 8</div><div>Option 9</div><div>Option 10</div>
</div>
</div>
<div id="content"></div>
</body>
</html>