'One Side Page Vertical Scroll

I'm trying to figure out how to make one side of a page scroll. An example would be something like https://shop.luxonis.com/. The solution I came up with was styling the right column as such

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

But this makes the page have two scroll wheels. Any ideas? I know the site I gave uses position sticky, but I'm not sure what else.

Thanks!

htmlcss


Solution 1:[1]

You can use position: sticky for the left panel

Here is the playground

.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>

Solution 2:[2]

You have to create two div containers, left and right one, the left one is gonna have only one element and the right one gonna have multiple elements.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Nick Vu
Solution 2 Steve Walson

Related Questions