单侧页垂直滚动

Question

我想弄清楚如何使页面的一侧滚动。例如https://shop.luxonis.com/。我想到的解决方案是将右列样式化为

.right-column {
   overflow-y: scroll;
   height: 100vh;
}

但是这使得页面有两个滚动轮。什么好主意吗?我知道我给的网站使用了位置粘贴，但我不确定还有什么。

谢谢!

Answer 1

您可以使用position: sticky作为左面板

这里是操场

.main {
  width: 100%;
  height: 100%;
}
.header {
  height: 2rem;
  background-color: orange;
}
.flexbox {
  display: flex;
}
.left-panel {
  position: sticky; /* Set the element to become sticky  */
  height: 100vh;
  width: 50%;
  background-color: red;
  top: 0; /* Set the sticky positon top */
}
.right-panel {
  height: 1000rem;
  width: 50%;
  background-color: blue;
}
.footer {
  height: 5rem;
  background-color: yellow;
}

<div class="main">
<div class="header">
</div>
<div class="flexbox">
<div class="left-panel">
     Content
  </div>
  <div class="right-panel">
     Scrolling content
  </div>
</div>
<div class="footer">
  
  </div>
</div>

Answer 2

你必须创建两个div容器，左一个和右一个，左边的将只有一个元素，右边的将有多个元素。