Scrollbars
jQuery provides functionality to interact with scrollable DOM elements. As discussed in the
preceding chapter, plugins can extend jQuery with even more capability. Even a quick web
search results in an array of plugins that tout their scrolling merits. Although these plugins can
be useful for specifi c purposes, jQuery handles most common needs.This chapter focuses on the interactions provided by the jQuery core framework. These inter-
actions include determining the current scrollbar position of a scrollable element as well as
setting the scrollbar position. As expected, you could accomplish these tasks using a combina-
tion of JavaScript and DOM attributes; however, as usual, jQuery simplifi es and standardizes
these items.Getting the Position of a Scrollbar
Like most of jQuery’s functionality, getting the position of a scrollbar is simple:
$('div#aScrollableElement').scrollTop();
$('div#aScrollableElement').scrollLeft();As demonstrated by the preceding lines of code, scroll position involves two dimensions: verti-
cal and horizontal. Vertical scroll position is measured in pixels from the top, and horizontal
scroll position is measured in pixels from the left.To showcase the output from these functions, the following example attaches a scroll event
handler that displays the scroll position during scrolling. You begin with the XHTML5 base,
which is presented in the following markup (Example 10-1 in the code downloads at http://www.
wrox.com/go/webdevwithjquery):<!DOCTYPE HTML>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<meta http-equiv='content-type'
content='application/xhtml+xml; charset=utf-8' />
<meta http-equiv='content-language' content='en-us' />
<title>Scrollbar Position</title>