How do we find the width and height of the browser window? How do we get the full width and height of the document, including the scrolled out part? How do we scroll the page using JavaScript?
Using Other Scrolling Methods. There’s actually other scrolling methods besides window.scroll. These other scroll methods can do things like incrementally scroll a specific distance, or even scroll to a DOM node. Here’s the various scroll methods that accept the “smooth” scrolling config object. Allows a straight jump 'scroll effect' between elements within the scrolling box. This is default: smooth: Allows a smooth animated 'scroll effect' between elements within the scrolling box. Initial: Sets this property to its default value. Read about initial: inherit: Inherits. Yet another jQuery based smooth scroll script which smoothly scrolls the web page to a specific point/ID/anchor/DIV within the document. Also has the ability to automatically update the url hash when the smooth scroll is completely finished. How to use it: 1. Create anchor links pointing to the elements with unique IDs. Yet another jQuery based smooth scroll script which smoothly scrolls the web page to a specific point/ID/anchor/DIV within the document. Also has the ability to automatically update the url hash when the smooth scroll is completely finished. Of course, we have to actually have a smoothScroll function, too. This is the complicated aspect, because it’s all about finding an object’s position on the page,.
For this type of information, we can use the root document element
document.documentElement
, that corresponds to the <html>
tag. But there are additional methods and peculiarities to consider.Width/height of the window
To get window width and height, we can use the
clientWidth/clientHeight
of document.documentElement
:For instance, this button shows the height of your window:
Browsers also support properties like
window.innerWidth/innerHeight
. They look like what we want, so why not to use them instead?If there exists a scrollbar, and it occupies some space,
clientWidth/clientHeight
provide the width/height without it (subtract it). In other words, they return the width/height of the visible part of the document, available for the content.window.innerWidth/innerHeight
includes the scrollbar.If there’s a scrollbar, and it occupies some space, then these two lines show different values:
In most cases, we need the available window width in order to draw or position something within scrollbars (if there are any), so we should use
documentElement.clientHeight/clientWidth
.Please note: top-level geometry properties may work a little bit differently when there’s no
<!DOCTYPE HTML>
in HTML. Odd things are possible.In modern HTML we should always write
DOCTYPE
.Width/height of the document
Theoretically, as the root document element is
document.documentElement
, and it encloses all the content, we could measure the document’s full size as document.documentElement.scrollWidth/scrollHeight
.But on that element, for the whole page, these properties do not work as intended. In Chrome/Safari/Opera, if there’s no scroll, then
documentElement.scrollHeight
may be even less than documentElement.clientHeight
! Weird, right?To reliably obtain the full document height, we should take the maximum of these properties:
Why so? Better don’t ask. Kite compositor 1 9 7 64. These inconsistencies come from ancient times, not a “smart” logic.
Get the current scroll
DOM elements have their current scroll state in their
scrollLeft/scrollTop
properties.For document scroll,
document.documentElement.scrollLeft/scrollTop
works in most browsers, except older WebKit-based ones, like Safari (bug 5991), where we should use document.body
instead of document.documentElement
.Luckily, we don’t have to remember these peculiarities at all, because the scroll is available in the special properties,
window.pageXOffset/pageYOffset
:These properties are read-only.
Scrolling: scrollTo, scrollBy, scrollIntoView
To scroll the page with JavaScript, its DOM must be fully built.
For instance, if we try to scroll the page with a script in
<head>
, it won’t work.Regular elements can be scrolled by changing
scrollTop/scrollLeft
.We can do the same for the page using
document.documentElement.scrollTop/scrollLeft
(except Safari, where document.body.scrollTop/Left
should be used instead).Alternatively, there’s a simpler, universal solution: special methods window.scrollBy(x,y) and window.scrollTo(pageX,pageY).
- The method
scrollBy(x,y)
scrolls the page relative to its current position. For instance,scrollBy(0,10)
scrolls the page10px
down.The button below demonstrates this: - The method
scrollTo(pageX,pageY)
scrolls the page to absolute coordinates, so that the top-left corner of the visible part has coordinates(pageX, pageY)
relative to the document’s top-left corner. It’s like settingscrollLeft/scrollTop
.To scroll to the very beginning, we can usescrollTo(0,0)
.
These methods work for all browsers the same way.
scrollIntoView
For completeness, let’s cover one more method: elem.scrollIntoView(top).
The call to
elem.scrollIntoView(top)
scrolls the page to make elem
visible. It has one argument:- If
top=true
(that’s the default), then the page will be scrolled to makeelem
appear on the top of the window. The upper edge of the element will be aligned with the window top. - If
top=false
, then the page scrolls to makeelem
appear at the bottom. The bottom edge of the element will be aligned with the window bottom.
The button below scrolls the page to position itself at the window top:
And this button scrolls the page to position itself at the bottom:
Forbid the scrolling
Sometimes we need to make the document “unscrollable”. For instance, when we need to cover the page with a large message requiring immediate attention, and we want the visitor to interact with that message, not with the document.
To make the document unscrollable, it’s enough to set
document.body.style.overflow = 'hidden'
. The page will “freeze” at its current scroll position.Try it:
The first button freezes the scroll, while the second one releases it.
We can use the same technique to freeze the scroll for other elements, not just for
document.body
.The drawback of the method is that the scrollbar disappears. If it occupied some space, then that space is now free and the content “jumps” to fill it.
Smoothscroll Js
That looks a bit odd, but can be worked around if we compare
clientWidth
before and after the freeze. If it increased (the scrollbar disappeared), then add padding
to document.body
in place of the scrollbar to keep the content width the same.Summary
Geometry:
- Width/height of the visible part of the document (content area width/height):
document.documentElement.clientWidth/clientHeight
- Width/height of the whole document, with the scrolled out part:
Scrolling:
Smooth Page Scrolling Js Plugin
- Read the current scroll:
window.pageYOffset/pageXOffset
. - Change the current scroll:
window.scrollTo(pageX,pageY)
– absolute coordinates,window.scrollBy(x,y)
– scroll relative the current place,elem.scrollIntoView(top)
– scroll to makeelem
visible (align with the top/bottom of the window).