jQuery in Action
The Dimensions Plugin
287
Note that, for all the inner and outer methods, specifying
window
or
document
have the same effect.
Now let's learn about the other dimensions this plugin allows us to locate.
9.2.2 Getting scroll dimensions
As has long been true for user interfaces of all types, content doesn't always fit in the
space allotted to it. This issue has been addressed via the use of scrollbars, which
allow users to scroll through all the content even if it can't all be seen within a view-
port at once. The web is no different; content frequently overflows its bounds.
space allotted to it. This issue has been addressed via the use of scrollbars, which
allow users to scroll through all the content even if it can't all be seen within a view-
port at once. The web is no different; content frequently overflows its bounds.
We may need to know the scrolled state of the window or of content elements
that allow scrolling when trying to place new content (or move existing content)
in relation to the window or scrolled element. Additionally, we may want to affect
the scrolled position of the window or scrolled element.
in relation to the window or scrolled element. Additionally, we may want to affect
the scrolled position of the window or scrolled element.
The Dimensions Plugin allows us to obtain or set the scrolled position of these
elements with the
scrollTop()
and
scrollLeft()
methods.
Wrapping either
window
or
document
produces the same results.
Do you want to play with this in a lab page? If so, bring up the file chapter9/
dimensions/lab.scroll.html, and you'll see the display in figure 9.6.
This lab page allows us to apply top and left scroll values to a test subject and
to the window itself; it uses the getter version of the
scrollTop()
and
scrollLeft()
commands to display the scroll values of the scroll dimensions at all times.
The Lab Control Panel pane of this page contains two text boxes in which
to enter numeric values to be passed to the
scrollTop()
and
scrollLeft()
Command syntax: scrollTop and scrollLeft
scrollTop(value)
scrollLeft(value)
Gets or sets the scroll dimensions for the window, document, or scrollable content element.
Scrolled elements are content-containing elements with a CSS overflow, overflow-x, or
overflowy
Scrolled elements are content-containing elements with a CSS overflow, overflow-x, or
overflowy
value of scroll or auto.
Parameters
value
(Number) The value, in pixels, to which the scroll top or left dimension is set.
Unrecognized values are defaulted to 0. If omitted, the current value of the top or
left scroll dimension is obtained and returned.
Unrecognized values are defaulted to 0. If omitted, the current value of the top or
left scroll dimension is obtained and returned.
Returns
If a value parameter is provided, the wrapped set is returned. Otherwise, the requested
dimension is returned.
If a value parameter is provided, the wrapped set is returned. Otherwise, the requested
dimension is returned.