Getting the Position of a Scrollbar (^) ❘ 269
}
div.filler {
margin: 10px;
padding: 5px;
width: 400px;
height: 150px;
background: rgb(200, 200, 255);
}
div.status-bar {
margin: 5px 20px 5px 20px;
}The preceding XHTML and CSS are combined with the following JavaScript:
$(document).ready(
function()
{
$('div#container')
.scroll(
function()
{
$('span#vertical-scroll-value')
.text($(this).scrollTop());$('span#horizontal-scroll-value')
.text($(this).scrollLeft());
}
);
}
);The preceding source code results in the document that you see in Figure 10-1.
FIGURE 10-1
In the preceding example, you created a scrollable
element with content larger than its
container. When you scroll that container to view its content, the scrollbar positions are retrieved
and displayed on the page.