Getting the Position of a Scrollbar (^) ❘ 271
would appear on the viewport due to the application of 100 percent width and height with the pre-
ceding stylesheet rule.
body {
font: 12px "Lucida Grande", Arial, sans-serif;
background: rgb(189, 189, 189 ;
color: rgb(50, 50, 50);
margin: 0 ;
padding: 0 ;
}
The next rule positions the
element with id name container, which contains the scrollable
content. This
content. This
element is sized to a rather small 200 pixels by 100 pixels, and a small amount
of padding and horizontal margin is applied. The background is set to white; there is a dark gray bor-
der placed around the container; and fi nally, the overflow: auto; declaration is added so that scroll-
bars appear when this element’s contents exceed its specifi ed dimensions.
div#container {
border: 1px solid rgb(64, 64, 64);
background: #fff;
padding: 5px;
margin: 0 20px 0 20px;
width: 200px;
height: 100px;
overflow: auto;
}
The next rule sets the presentation of the
of padding and horizontal margin is applied. The background is set to white; there is a dark gray bor-
der placed around the container; and fi nally, the overflow: auto; declaration is added so that scroll-
bars appear when this element’s contents exceed its specifi ed dimensions.
div#container {
border: 1px solid rgb(64, 64, 64);
background: #fff;
padding: 5px;
margin: 0 20px 0 20px;
width: 200px;
height: 100px;
overflow: auto;
}
The next rule sets the presentation of the
element with the class name filler, setting a small
amount of margin and padding as well as a light blue background. More important, the element is
sized to 400 pixels by 150 pixels so that it is larger than its container.
div.filler {
margin: 10px;
padding: 5px;
width: 400px;
height: 150px;
background: rgb(200, 200, 255);
}
The next rule simply adds a small amount of margin to the
amount of margin and padding as well as a light blue background. More important, the element is
sized to 400 pixels by 150 pixels so that it is larger than its container.
div.filler {
margin: 10px;
padding: 5px;
width: 400px;
height: 150px;
background: rgb(200, 200, 255);
}
The next rule simply adds a small amount of margin to the
elements with the class name
status-bar to add a small amount of space between the elements and to align with the scrollable
container.
div.status-bar {
margin: 5px 20px 5px 20px;
}
The JavaScript for this example is, as usual, succinct. You start by adding a handler function for the
scroll event.
$('div#container')
.scroll(
http://www.it-ebooks.info
status-bar to add a small amount of space between the elements and to align with the scrollable
container.
div.status-bar {
margin: 5px 20px 5px 20px;
}
The JavaScript for this example is, as usual, succinct. You start by adding a handler function for the
scroll event.
$('div#container')
.scroll(
http://www.it-ebooks.info