CODEWITHSUNDEEP
htmlcss
Joe Iddon
Joe Iddon

Reputation: 20434

Setting the position of a Scroll Bar

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.

Upvotes: 0

Views: 106

Answers (3)

iSZ
iSZ

Reputation: 682

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;
  }

Upvotes: 0

Tedds
Tedds

Reputation: 312

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>

Upvotes: 0

konrad_pe
konrad_pe

Reputation: 1190

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!

Upvotes: 2

Related Questions