One Side Page Vertical Scroll-CodePudding

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!

CodePudding user response：

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

</div>
<div >
<div >
     Content
  </div>
  <div >
     Scrolling content
  </div>
</div>
<div >
  
  </div>
</div>

CodePudding user response：

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.