Why is scrollbar position: absolute?

[Jon Tara]

I'm curious as to why the scrollbar (by default) is position:absolute? Shouldn't it really be position:relative?

(I know if you specify a class for the scrollbar, then the default is not done, and then you have the choice of using whatever CSS you want...)

I think this is the reason why the scrollbar in some cases is the height of the screen, when it should be the height of the wrapper. It depends on what CSS properties you use for the wrapper.

I was researching and experimenting, and finally got it to work consistently for my jQuery Mobile plugin, by setting position:relative for the wrapper. If you set position:relative for an element, then child elements that are positioned absolutely will position relative to the parent, not the document. So, I added position:relative to the wrapper, and now the scrollbar is always where it should be.

However, this is not a good solution, since maybe you don't want to use position:relative for the wrapper. OK, it turns out that the rule isn't exactly as I stated above. It's actually: when you use posiiton:absolute on an element, it's positioned relative to the nearest ancestor that is NOT position:static.

Well, in all of the iScroll examples, the wrapper is position:absolute. So, the scrollbars work correctly. Drop the position:absolute, though, and just let the wrapper position staticly, and the scrollbars are no longer positioned inside of the wrapper.

Why not just position:relative for the scrollbar, then? That will position it relative to it's nearest ancestor, regardless of how IT is positioned, which is what we want here, isn't it?

I think my fix now for the jQuery Mobile plugin is going to work-around the default by always providing a class for the scrollbar, and then either providing a CSS file or else inserting the CSS into the DOM (like iScroll) if the class is the default class. (not if user overrides class with an option of course).

[Jon Tara]

Hmmmm.... Setting the scrollbar position:relative doesn't work! The height comes out wrong. I guess I am misunderstanding position:relative's effect on the element it is applied-to. It doesn't position relative to closest ancestor, but relative to "where it would normally be positioned".

So, the only way is to use either position:relative or position:fixed on the wrapper. Either one makes descendants that are position:absolute position relative to the wrapper. If the wrapper is position:static, the scrollbar will not position correctly.

I guess my solution is to force position:relative for the wrapper in the case where it is already position:static. If it is position:absolute, I just leave it alone. (It shouldn't be position:fixed, that would be really weird...)

I can't think of any reason that something inside of the scroller might have position:absolute, and would mean to actually position relative to the page. So, it should be safe to force position:relative for the wrapper when it is position:static.

[Dayanithi Hari]

Hi good research on it, Could you help me out to keep a div inside the scroll wrapper to be fixed. So that the div is static and the div scroll according with the scroller. 

<div id="wrapper">

  <div id="scroller">

    <div class="slide" id="s_1">

      <img class="bgd_img" src="img/sc1.jpg">

   <!--    <div class="foreground" id="billboard"></div>-->   

   <div id="tree"></div>

    </div>

   <div id="bike"><img src="img/bike.png" alt=""></div>

    <div  class="slide" id="s_2">ref: slide 2</div>

    <div  class="slide" id="s_3">ref: slide 3</div>

    <div  class="slide" id="s_4">ref: slide 4</div>

    <div  class="slide" id="s_5">ref: slide 5</div>

    <div  class="slide" id="s_6">ref: slide 6</div>

    <div  class="slide" id="s_7">ref: slide 7</div>

    <div  class="slide" id="s_8">ref: slide 8</div>

    <div  class="slide" id="s_9">ref: slide 9</div>

    <div  class="slide" id="s_10">ref: slide 10</div>

    <div  class="slide" id="s_11">ref: slide 11</div>

    <div  class="slide" id="s_12">ref: slide 12</div>

  </div>

</div>

I kept the bike position fixed. I can achieve this by keeping the bike div outside the wrapper but I have take advantage of z index. inside the wrapper. 

 

Came across of your jquery+iscroll plugin and as well answer in this topic. Looking forward to the reply.