Conflict between div scrollbar and browser scrollbar

Question

I have a div and I want to attach a scrollbar to it to keep the menu fixed (Tab1 here).

BODY
{
 font-size:0.8em;
    MARGIN: 0px 0px 0px 10px;
 COLOR: #000; 
    FONT-FAMILY: Tahoma, Verdana, Arial, Helvetica, sans-serif;
    BACKGROUND-COLOR: #ffffff;
 background: url(null) fixed #ffffff; 
}

H1
{
    MARGIN-TOP: 20px;
    FONT-WEIGHT: bold;
    FONT-SIZE: 16px;
    MARGIN-BOTTOM: 10px;
 COLOR: #A1006B;
    TEXT-ALIGN: left;
    FONT-VARIANT: normal
}

#tabs-1 {
font-size: 14px;}
.ui-widget-header{
background:#ffff;
}

#tabs-2 {
overflow-y:scroll;
height:100%;
}

<title>Test</title> 

<link rel="stylesheet" type="text/css" href="../style/test.css" />
 
 <div id="tabs-1">
<ul>
<li><a href="#tabs-2">Tab 1</a></li>
</ul>

<div id="tabs-2">

 <h1>Test</h1>
<p class="Comment"> <div>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</div>
<ul>
<li>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</li>
<li>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</li>
<li>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</li>
<li>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</li>
<li>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</li>
<li>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</li>
<li>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</li>
</ul></p>

 <h1>Test</h1>
<p class="Comment"> <div>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</div>
<ul>
<li>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</li>
<li>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</li>
<li>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</li>
<li>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</li>
<li>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</li>
<li>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</li>
<li>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</li>
</ul></p>

 <h1>Test</h1>
<p class="Comment"> <div>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</div>
<ul>
<li>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</li>
<li>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</li>
<li>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</li>
<li>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</li>
<li>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</li>
<li>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</li>
<li>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</li>
</ul></p>

 <h1>Test</h1>
<p class="Comment"> <div>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</div>
<ul>
<li>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</li>
<li>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</li>
<li>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</li>
<li>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</li>
<li>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</li>
<li>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</li>
<li>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</li>
</ul></p>

 <h1>Test</h1>
<p class="Comment"> <div>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</div>
<ul>
<li>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</li>
<li>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</li>
<li>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</li>
<li>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</li>
<li>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</li>
<li>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</li>
<li>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</li>
</ul></p>

 <h1>Test</h1>
<p class="Comment"> <div>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</div>
<ul>
<li>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</li>
<li>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</li>
<li>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</li>
<li>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</li>
<li>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</li>
<li>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</li>
<li>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</li>
</ul></p>

 <h1>Test</h1>
<p class="Comment"> <div>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</div>
<ul>
<li>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</li>
<li>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</li>
<li>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</li>
<li>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</li>
<li>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</li>
<li>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</li>
<li>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</li>
</ul></p>




</div>

Here's my CSS for the div scrollbar :

#tabs-2 { overflow-y:scroll; height:100%; }

When i'm using a fixed height value (like 400px), it works but I have a lot of pages with the same div but different height so this value will not works for every div.

I want to get rid of the browser scrollbar and only use a div scrollbar.

Is there any way to make a scrollbar that adapt dynamically for any div height?

Why don't you fix the tab1 rather than giving overflow to tab2? — Saurav Jamwal, Jul 07 '17 at 11:42
Possible duplicate of [Auto height div with overflow and scroll when needed](https://stackoverflow.com/questions/10155344/auto-height-div-with-overflow-and-scroll-when-needed) — Alexander, Jul 07 '17 at 13:51

score 0 · Accepted Answer · answered Jul 07 '17 at 12:09

0

Changing css will solve the problem,

#tabs-2 {
  overflow-y:scroll;
  height:100%; 
  width:100%; **Added
  position:absolute; **Added
}
BODY {
  font-size:0.8em;
  MARGIN: 0px 0px 0px 10px;
  COLOR: #000; 
  FONT-FAMILY: Tahoma, Verdana, Arial, Helvetica, sans-serif;
  BACKGROUND-COLOR: #ffffff;
  background: url(null) fixed #ffffff; 
  overflow:hidden;
}

Hope helps,

answered Jul 07 '17 at 12:09

Berkay Yaylacı

4,383
2
20
37

Thank you for your reply ! It works, i can scroll through the div with the fixed panel but it's super small : https://pasteboard.co/GzPynJa.png Maybe i have something in conflict. – Kilian Jacquemin Jul 07 '17 at 12:26
See this working [example](https://jsfiddle.net/2rddbac2/7/). It might be an other problem but this works.. @KilianJacquemin – Berkay Yaylacı Jul 07 '17 at 12:54

score 0 · Answer 2 · answered Jul 07 '17 at 12:15

I mean to say like this:

body{
   font-size:0.8em;
   margin: 0px 0px 0px 10px;
   padding: 0px;
   color: #000; 
   font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
   background-color: #ffffff;
   background: url(null) fixed #ffffff;
 }

h1{
  font-weight: bold;
  margin: 0px;
  font-size: 16px;
  color: #a1006b;
  text-align: left;
  font-variant: normal;
}

#tabs-1 {
  position: fixed;
  z-index:1;
  background-color: #fff;
  width: 100%;
}

.ui-widget-header{
  background:#ffffff;
}

#tabs-2 {
  position: relative;
  top: 60px;
}

<html>
<head>
<title>Test</title>
</head>
<body>

      <div id="tabs-1">
     <ul>
        <li><a href="#tabs-2">Tab 1</a></li>
     </ul>
     </div>

     <div id="tabs-2">
     <h1>Test</h1>
     <p class="Comment"> <div>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</div>
     <ul>
        <li>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</li>
        <li>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</li>
        <li>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</li>
        <li>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</li>
        <li>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</li>
        <li>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</li>
        <li>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</li>
     </ul></p>

     <h1>Test</h1>
     <p class="Comment"> <div>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</div>
     <ul>
        <li>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</li>
        <li>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</li>
        <li>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</li>
        <li>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</li>
        <li>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</li>
        <li>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</li>
        <li>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</li>
    </ul></p>

    <h1>Test</h1>
    <p class="Comment"> <div>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</div>
    <ul>
       <li>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</li>
       <li>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</li>
       <li>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</li>
       <li>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</li>
       <li>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</li>
       <li>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</li>
       <li>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</li>
       </ul></p>

       <h1>Test</h1>
       <p class="Comment"> <div>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</div>
       <ul>
          <li>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</li>
          <li>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</li>
          <li>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</li>
          <li>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</li>
          <li>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</li>
          <li>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</li>
          <li>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</li>
      </ul></p>

      <h1>Test</h1>
      <p class="Comment"> <div>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</div>
      <ul>
         <li>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</li>
         <li>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</li>
         <li>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</li>
         <li>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</li>
         <li>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</li>
         <li>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</li>
         <li>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</li>
     </ul></p>

     <h1>Test</h1>
     <p class="Comment"> <div>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</div>
     <ul>
        <li>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</li>
        <li>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</li>
        <li>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</li>
        <li>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</li>
        <li>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</li>
        <li>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</li>
        <li>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</li>
     </ul></p>

     <h1>Test</h1>
     <p class="Comment"> <div>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</div>
     <ul>
        <li>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</li>
        <li>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</li>
        <li>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</li>
        <li>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</li>
        <li>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</li>
        <li>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</li>
        <li>Nunc nec erat nulla. Donec viverra eu quam ac facilisis.</li>
    </ul></p>
    </div>

</body>
</html>

That's perfect thank you ! Weird though, i implemented your code in my website but it doesn't show the scrollbar... I have probably something in conflict. — Kilian Jacquemin, Jul 07 '17 at 12:31

Conflict between div scrollbar and browser scrollbar

2 Answers2