使用主滚动条滚动内部 div 然后滚动页面的其余部分答案

【问题标题】：Using main scrollbar to scroll inner div then scroll rest of page使用主滚动条滚动内部 div 然后滚动页面的其余部分
【发布时间】：2022-01-04 19:49:26
【问题描述】：

我的 hero div 中有一个容器 div right-col，它包含两个内部 div。内部 div 是粘性的，容器 div 是可滚动的，以提供卡片向上滑动的错觉。

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <div class="hero">
        <div class="left-col">h</div>
        <div class="right-col">
            <div class="top">1st card</div>
            <div class="bottom">2nd Card</div>
        </div>
    </div>
    <div class="projects">a</div>
    <div class="contact-footer"></div>
    <div></div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">

</script>
</html>

CSS：

body{
    overflow: auto;
    background-color: black;
}
.hero {
    display: flex;
    flex-direction: row;
}

.left-col{
    width: 40vw;
    background-color: black;
    height: 100vh;
}
.right-col{
    min-width: 60vw;
    background-color: blue;
    overflow: auto;
    height: 100vh;
}
.top{
    height: 100vh;
    background-color: chartreuse;
    position: sticky;
    top: 0;
}
.bottom{
    height: 100vh;
    background-color: orange;
    position: sticky;
    top: 10%;
}

.projects{
    height: 100vh;
    background-color: crimson;
    position: sticky;
    top: 0;
}

但是，滚动条位于 div right-col 的内部，并且独立于主滚动条。有没有办法可以使用主滚动条滚动容器 div 直到它到达底部然后继续滚动页面的其余部分？可能使用js或jquery？

【问题讨论】：

标签： javascript html jquery css

【解决方案1】：

您可以尝试添加以下 css。它将使内部滚动条宽度为 0，所以基本上它是不可见的，但仍然可以工作。

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

如果您需要更具体的内容，可以尝试使用scroll 事件来同步两个滚动条或其他内容。

【讨论】：

是的，但这只会隐藏内部滚动条，我喜欢使用主滚动条控制内部滚动
那么你将不得不使用滚动事件，正如我提到的使用香草 javascript 或 jquery 并附加一个事件侦听器，以便移动一个滚动条也会改变另一个滚动条。
您的解决方案也仅适用于 webkit 浏览器。所以大量的浏览器不会受到这种方式的影响。