(^274) ❘ CHAPTER 10 SCROLLBARS
div.filler {
margin: 10px;
padding: 5px;
width: 400px;
height: 150px;
background: rgb(200, 200, 255);
}
div.status-bar,
div.button-bar {
margin: 5px 20px 5px 20px;
}
div.block {
margin: 10px;
padding: 5px;
width: 400px;
height: 70px;
background-color: rgb(255, 140, 0);
}
Finally, you apply the following JavaScript, which extends Example 10-1 with new code that
enables the click event handlers to set scrollbar positions.
$(document).ready(
function()
{
$('div#container')
.scroll(
function()
{
$('span#vertical-scroll-value')
.text($(this).scrollTop());
$('span#horizontal-scroll-value')
.text($(this).scrollLeft());
}
);
$('button.block-button')
.click(
function()
{
$('div#container')
.scrollTop($('div#' + $(this).data().block).offset().top
- $('div#container').offset().top
- $('div#container').scrollTop())
.scrollLeft($('div#' + $(this).data().block).offset().left
- $('div#container').offset().left
- $('div#container').scrollLeft());
}
);}
);The preceding source code gives you output, as shown in Figure 10-2, in Safari on Mac OS X.