使用主滚动条滚动内部 div 然后滚动页面的其余部分
Posted
技术标签:
【中文标题】使用主滚动条滚动内部 div 然后滚动页面的其余部分【英文标题】：Using main scrollbar to scroll inner div then scroll rest of page 【发布时间】：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？
【问题讨论】：
【参考方案1】：您可以尝试添加以下 css。它将使内部滚动条宽度为 0，所以基本上它是不可见的，但仍然可以工作。
.hero ::-webkit-scrollbar
width: 0px;
如果您需要更具体的内容，可以尝试使用scroll 事件来同步两个滚动条或其他内容。
【讨论】：
是的，但这只会隐藏内部滚动条，我喜欢使用主滚动条控制内部滚动 那么你将不得不使用滚动事件，正如我提到的使用香草 javascript 或 jquery 并附加一个事件侦听器，以便移动一个滚动条也会改变另一个滚动条。 您的解决方案也仅适用于 webkit 浏览器。所以大量的浏览器不会受到这种方式的影响。以上是关于使用主滚动条滚动内部 div 然后滚动页面的其余部分的主要内容，如果未能解决你的问题，请参考以下文章