时间戳

首页 > 解决方案 > 如何只允许 1 个滚动条与 Javascript 一起使用？

javascript - 如何只允许 1 个滚动条与 Javascript 一起使用？

问题描述

我有一个带有filter_optionsand的 html 页面content。里面filter_options列出了一些选项。我已授予scroll访问权限，scroll-Y并且会更改scroll-X这些选项。但是，content卷轴也在起作用。如何让filter_options滚动仅在滚动时才起作用？

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>

标签： javascriptscroll

解决方案

尝试使用

#content {overflow: hidden}

推荐阅读