Reputation: 22668

How to set up the browser scrollbar to scroll part of a page?

I've seen this done in a few sites, an example is artofadambetts.com. The scroll bar on the page scrolls only an element of the page, not the entire page. I looked at the source and havent't been able to figure it out yet. How is this done?

Upvotes: 6

Answers (11)

apandit

Reputation: 3344

For a div, you can add in the cSS

overflow: auto

For example,

<div style="overflow:auto; height: 500px">Some really long text</div>

Edit: After looking at the site you posted, you probably don't want this. What he does in his website is make the layout as fixed (position: fixed) and assigns it a higher z-index than the text, which is lower z-index.

For example:

<div class="highz"> //Put random stuff here. it'll be fixed </div>
<div class="lowz"> Put stuff here you want to scroll and position it.</div>

with css file

div.highz {position: fixed; z-index: 2;}
div.lowz {position: fixed; z-index: 1;}

Upvotes: 0

sumit pandey

Reputation: 1221

Try this for scrolling a particular part of web page......

 <html>
      <head>
      <title>Separately Scrolled Area Demo</title>
        </head>
          <body>
              <div style="width: 100px; border-style: solid">

            <div style="overflow: auto; width: 100px; height: 100px">
                        sumit..................
                        amit...................
                        mrinal.................
                        nitesh................
                        maneesh................
                        raghav...................
                        hitesh...................
                        deshpande................
                        sidarth....................
                        mayank.....................
                        santanu....................
                        sahil......................
                        malhan.....................
                        rajib.....................
                         </div>
                      </div>
                  </body>
      </html>

Upvotes: 0

Anthony Williams

Reputation: 68571

You can use fixed positioning or absolute positioning to tie various elements to fixed positions on the page. Alternatively you can specify a fixed size element (such as a DIV) and use overflow: scroll to force the scrollbars on that.

As already mentioned, getting everything to work in Internet Explorer AND Firefox/Opera/Safari requires judicious use of hacks.

Upvotes: 1

Dave Rutledge

Reputation: 5535

It should be noted that without further hacks position fixed does not work for IE6, which is still managing to hold on to 15-30% of the market, depending on your site.

Upvotes: 1

Andrew Myhre

Reputation: 1474

To find out how people do these kinds of things in CSS and/or Javascript the tool Firebug is just outstanding:

Firebug addon for Firefox

Upvotes: 1

p4bl0

Reputation: 3906

In fact it is not the scrolling part that is "doing the job", it is the fixed part of the page.

In order to do this, you should use CSS and add position: fixed; property (use it with top, bottom, left and/or right properties) to the elements that you wish not to scroll.

And you should not forget to give them a greater z-index, if you don't there might be some of the scrolling element that can go over your fixed element as you scroll (and you certainly don't want that).

Upvotes: 5

Buzz

Reputation: 1667

They've set the side and top elements to have fixed positions via CSS (see line 94 of their style.css file). This holds them in the viewport while the rest scrolls.

Upvotes: 0