Geek Answers Handbook

How to configure browser scrollbar to scroll part of a page?

I have seen this on several sites, for example artofadambetts.com . The scroll bar on the page scrolls only the page element, not the entire page. I looked at the source and could not understand it. How it's done?

+6
javascript html css
source share
11 answers

This is pretty elegant. It uses the "position: fixed" on most sections, and the one that scrolls the one that does not have it.

+9
source share

This is actually not a scrollable part that does the “work”, it is a fixed part of the page.

To do this, you must use CSS and add the position: fixed; property position: fixed; (use it with the attributes top , bottom , left and / or right ) for elements that you do not want to scroll.

And you should not forget to give them more z-index , if you do not, there may be some kind of scroll element that can move around your fixed element when scrolling (and you certainly do not want this).

+4
source share

To find out how people do such things in CSS and / or Javascript, the Firebug tool is just great:

Firebug addon for Firefox

+1
source share

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

+1
source share

You can use fixed positioning or absolute positioning to snap 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 use of scrollbars.

As already mentioned, everything you need to work in Internet Explorer and Firefox / Opera / Safari requires the wise use of hacks.

+1
source share

For div, you can add in cSS

 overflow: auto

For example,

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

Edit: After viewing the site you published, you probably don't want this. What he does on his website makes the layout fixed (position: fixed) and assigns it a higher z index than text, which is a 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. & lt / div>

with css file

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

This can be done in CSS using "position: absolute"; section

Here is an example template:

http://www.demusdesign.com/bipolar/index.html

From http://www.demusdesign.com/

0
source share

The page scrolls in the browser, only this part is fixed in the right place.

This is done using the "position: fixed" CSS property of the part that you don’t want to scroll.

0
source share

They found that the side and top elements have fixed positions through CSS (see line 94 of their style.css file). This keeps them in the viewport until the rest of the scrolls.

0
source share

Try this to scroll a specific part of a 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>
0
source share

To set scrollbars on an element such as a div:

<div style="overflow-x: auto; overflow-y: auto;>the content</div>

If you need only horizontal or vertical scrollbar, use only what you need for overflow-x and overflow.

-3
source share

More articles:


All Articles