How to build a static scrollbar in HTML and CSS

Question

basically I have to achieve the stacic scrolling content section part. The top static border, and the bottom static border have to stay always visible regardless of the size of the browser, and the static scrolling content should adapt to this resizing happening.

I've been playing quite a lot with the overflow-y:hidden container with a overflow-y:scroll in a child container with no success.

This is what I've been trying:

    .vertical-scroll-viewer {
    overflow: auto;
    height: 100%;
    /*height: 100%;
    width: 100%;
    border: 1px solid green;
    overflow: hidden;*/
}

    .vertical-scroll-viewer-content {
    overflow: hidden;
    height: 100%;
    /*
    height: 99%;
    border: 1px solid blue;
    overflow: auto;
    padding-right: 15px;*/
}

And the HTML:

  <html>
<head>   
    <title>test</title>
</head>
<body>
    <h1> Header1</h1>
    <div class="vertical-scroll-viewer">

        <div class="vertical-scroll-viewer-content ">
            <div>  hi  </div>
            <div>  hi  </div>
            <div>  hi  </div>
            <div>  hi  </div>
            <div>  hi  </div>
            <div>  hi  </div>
            <div>  hi  </div>
            <div>  hi  </div>
            <div>  hi  </div>
            <div>  hi  </div>
            <div>  hi  </div>
            <div>  hi  </div>
            <div>  hi  </div>
            <div>  hi  </div>
            <div>  hi  </div>
            <div>  hi  </div>
            <div>  hi  </div>
            <div>  hi  </div>
            <div>  hi  </div>
            <div>  hi  </div>
            <div>  hi  </div>
            <div>  hi  </div>
            <div>  hi  </div>
            <div>  hi  </div>
            <div>  hi  </div>
            <div>  hi  </div>
            <div>  hi  </div>
            <div>  hi  </div>
            <div>  hi  </div>
            <div>  hi  </div>
            <div>  hi  </div>
            <div>  hi  </div>
            <div>  hi  </div>
            <div>  hi  </div>
            <div>  hi  </div>
            <div>  hi  </div>
            <div>  hi  </div>
            <div>  hi  </div>
            <div>  hi  </div>
            <div>  hi  </div>
            <div>  hi  </div>
            <div>  hi  </div>
            <div>  hi  </div>
            <div>  hi  </div>
            <div>  hi  </div>
            <div>  hi  </div>
            <div>  hi  </div>
            <div>  hi  </div>
            <div>  hi  </div>
            <div>  hi  </div>
            <div>  hi  </div>
            <div>  hi  </div>
            <div>  hi  </div>
            <div>  hi  </div>
            <div>  hi  </div>
            <div>  hi  </div>
            <div>  hi  </div>
            <div>  hi  </div>
            <div>  hi  </div>
            <div>  hi  </div>
        </div>
    </div>
    <h1> Header2</h1>
</body>
</html>

Header 2 dissapears below the scrollbar.

Does anyone know how to make this? Thanks!

While CSS scrollbar style support is a bit scattered it's getting better. Your closest to universal support would be something such as scrollbar-color: #000 #fff; though if you want to create your own don't forget about accessibility. — John
– John, Commented Jun 4, 2019 at 5:03

mplungjan · Accepted Answer · 2019-06-04 05:04:19Z

3

This works well.

Notice the reset of the html/body and the use of vh,vw instead of 100%

html, body { height: 100vh; margin: 0; }

.container {
  width: 100vw;
  height: 100vh;
  background: aqua;
  margin: auto;
  padding: 1px;
}

#right {
  margin-left: 15vw;
  height: 100vh;
  background: yellow;
  overflow:scroll;
}

.static {
  height: 50px;
  background: green;
}

#bottom {
  width: 100%;
  position: absolute;
  bottom: 0;
}

#left {
  width: 15vw;
  height: 100vh;
  background: red;
  float: left;
  position: absolute;
}

#middle {
  height: calc(100vh - 100px);
  overflow-y: scroll; /* it will work */
}

<section class="container">
  <div id="left">
    <div id="top" class="static">Top</div>
    <div id="middle">
      <h2>Middle</h2>
      <p style="height: 9001px;">Lorem ipsum</p>
      <p>Lorem ipsum</p>
    </div>
    <div id="bottom" class="static">Bottom</div>
  </div>
  <div id="right" class="scroll">
    <h2>Right</h2>
    <p style="height: 9001px;">Lorem ipsum</p>
    <p>Lorem ipsum</p>
  </div>
</section>

edited Jun 4, 2019 at 5:04

answered Jun 3, 2019 at 7:52

mplungjan

180k29 gold badges183 silver badges246 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Fernando Over a year ago

Yes is more or less what I need, but the Middle section should stay always visible, and the bottom part too. The Middle section + top + bottom should be always visible, regardless the Right section.

Fernando Over a year ago

Hi, it worked when I copied it in a local html file. the top, bottom part are always shown, but If I scroll in the main part it will scroll everything also. Is there any way to make it static as the menu in StackOverflow? I'll mark it as answered and ask for who to do the static StackOverflow menuin another question. Thanks again.

Fernando Over a year ago

I think if you add height: 70vh; instead of height: calc(100vh - 100px); and adding height: 15vh; to the two elements Top and Bottom might work

Michi · Accepted Answer · 2019-06-03 07:38:57Z

0

<div id="div1" style="width:200px; height: 500px;position:relative;">
    <div id="div2" style="max-height:100%;overflow:auto;border:1px solid red;">
        <div id="div3" style="height:1500px;border:5px solid yellow;">hello</div>
    </div>
</div>

answered Jun 3, 2019 at 7:38

Michi

1295 bronze badges

2 Comments

law_81 Over a year ago

Please provide some explanation.

Fernando Over a year ago

Thanks but that solution doesn't adapt to the size of the height of the browser: imgur.com/a/bBCbu8I as you can see the Hello scrollbar dissapears overflowing the bottom.

Collectives™ on Stack Overflow

How to build a static scrollbar in HTML and CSS

2 Answers 2

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related