Setting the position of a Scroll Bar

Question

In my website I have two main divs - one for the banner at the top, and one for the main content. They both contain inner elements like imgs, iframes etc. but I don't think this is important for my problem which is: how can I make the scroll bar for the main content not overlap the banner?

If it helps, you can view the source for my actual website on my github. But to save wasting time looking, I've wrote a small snippet in html which demonstrates this issue:

document.getElementById("someText").innerText = "this is some content ".replace(/ /g, '\n').repeat(15);

html, body {
  margin: 0;
  padding: 0;
}

#header {
  position: fixed;
  background-color: teal;
  z-index: 1;
  top: 0;
  height: 100px;
  width: 100%;
}

#main {
  postion: absolute;
  top: 100px;
}

<body>

<div id="header">
header
</div>

<div id="main">
<pre id="someText"></pre>
</div>

</body>

It may be hard to see, in the snippet here on SO but the scroll bar on the right overlaps the banner and I what I want is for it to stop when it reaches the banner.

I have tried (in the CSS) setting the overflow of the body to hidden as this is the scroll bar overlapping the banner, but this just removes it entirely so I can't scroll - so clearly not what I am looking for...

I have also tried setting the overflow-y of the main div to scroll, but this does not work as a bar does appear where I want it, but it is grayed-out so not usable.

score 2 · Accepted Answer · answered Aug 25 '17 at 10:42

I have created a fiddle for you: https://jsfiddle.net/3gvowvag/1/

Your HTML and JS stays the same. For your CSS:

html, body {
  margin: 0;
  padding: 0;
  overflow-y: hidden;
 }

#header {
  position: fixed;
  background-color: teal;
  z-index: 1;
  top: 0;
  height: 100px;
  width: 100%;
}

#main {
  position: absolute;
  top: 100px;
  max-height: 100%;
  width: 100%
  overflow-y: scroll;
}

So the changes are basically to give your html, body a overflow-y: hidden and your #main a max-height and width of 100% as well as overflow-y: scroll.

This basically does what you want - though I wouldn't be 100% confident about setting up the page like that. Absolute positioning and offsetting via pixels is a bit oldschool, also setting the overflow-y to hidden for html/body, not exactly sure how those things will behave in the long term. But pretty hard to fully think of this without further context.

P.S.: awesome cat!

Tedds · Answer 2 · 2017-08-25T10:50:04.853

0

You just need to add overflow-y: hidden; to the body (take a look at this previous answer) and then apply overflow-y: scroll; to the #main div.

document.getElementById("someText").innerText = "this is some content ".replace(/ /g, '\n').repeat(30);

html, body {
  margin: 0;
  padding: 0;
}

body {
  overflow-y: hidden;
}

#header {
  position: fixed;
  background-color: teal;
  z-index: 1;
  top: 0;
  height: 100px;
  width: 100%;
}

#main {
  postion: absolute;
  top: 100px;
  overflow-y: scroll;
}

<body>

<div id="header">
header
</div>

<div id="main">
<pre id="someText"></pre>
</div>

</body>

edited Aug 25 '17 at 10:50

answered Aug 25 '17 at 10:47

Tedds

312
2
6

If you re-read the bottom of my question, you can see I had already tried that and it doesn't work.. run your code snippet and you will see the scroll bar is "grayed-out". – Joe Iddon Aug 25 '17 at 10:49
Weird thing... I tried it in [another context](https://codepen.io/rogersegu/pen/f68a745bd50b8f6fb964a48fedc70f5b) and it worked. I presumed that the stackoverflow code snippet app was not rendering it correctly, I couldn't find another explanation. Maybe I'm missing something obvious... Please let me know if you figure out. Cheers! – Tedds Aug 25 '17 at 11:05
konrad above solved it, you need to **set the height of the main div** and then giving it an `overflow` for it to work – Joe Iddon Aug 25 '17 at 11:11
Sure, thanks! Just as I predicted, I was missing a big obvious thing :D – Tedds Aug 25 '17 at 11:14

score 0 · Answer 3 · answered Aug 25 '17 at 11:25

You might find this easier with a flexbox layout. Maybe something like this. As example set the overflow to auto if you don't want to see the greyed out scroll bar

<div class="wrapper">
    <div class="header">
       header
    </div>
    <div class="content">
       content
       content
       content
    </div>
</div>

.wrapper{
     display:flex;
     flex-direction:column;
     background:blue;
     height: 100vw;
 }

 .header{
      height:100px;
      background-color:pink
  }

  .content{
      background:green;
      flex-grow: 1;
      overflow:scroll;
  }

Setting the position of a Scroll Bar

3 Answers3