Browser - Scroll



This page is about scrolling in the internet context (http, html, javascript).

How to scroll?

Scrolling is implemented by the browser in response to:

  • user interaction (scrollbar, click)
  • or Javascript code.


Via the scrollbar

Scroll Bar

The scrollbar appears when the viewport is smaller than the rendered document.


This process is started by clicking on a anchor with a URL fragment

When navigating, the scroll occurs after the DOMContentLoaded event. Within this event, you can still manipulate the DOM to add a target element for fragment 1)



For the developer, you can also scroll to an element via the devtool elements pane.

Scroll Into View Devtool Chrome

What is the scroll location ?


ScrollTop 2) is the number of pixels that an element's content is scrolled vertically (webapi)

When scrollTop is used on the root element (the <html> element), the scrollY of the window is returned

// document element = root element  = html element
let scrollTopLog = () =>  { scrollTopElement.innerText = parent.document.documentElement.scrollTop; };
  • Jquery The windows position from the the top of the page (starts at zero and increase when you scroll down)


In the other X axis, you have also the ScrollLeft.

Scroll event

You can respond to scroll with the scroll event.

Animate on Screen

animating elements as they enter/leave the viewport.

Reveal on Scroll

Class toggle

Add and suppress class while you scroll

Slide presentation


Full page vertical scrolling:

Speed Easing

o.addEventListener("click", function(e) {
	t.Jump.jump(".steps", {
		duration: 1e3,
		offset: -r

Scroll to anchor


You disable:

  • the scrolling by disabling the overflow
disable-scrolling {
   overflow-y: hidden;

Scroll Depth Tracking

Story Telling

Discover More
Scroll Bar
Browser - Scroll

This page is scrolling in the internet context (http, html, javascript). Scrolling is implemented by the browser in response to: user interaction (scrollbar, click) or Javascript code. Via...
CSS - Sticky positioning (Pinning)

Sticky is a positioning option that: keeps the box in view (ie in the viewport)) within its containing block as the user scrolls. From a logical point of view, the element is treated: first...
Devtool Chrome Event Listener
DOM Event - Scroll

scroll is an view event that happens when the user scroll keydown block A function that tells when the element is visible (in the view port) Scroll is a really sensitive and CPU intensive function....
HTML - href (hypertext reference) attribute

href stands for hypertext reference. It forces the user agent (browser) to navigate to the resources by performing an Hypertext fetch All elements that have an href attributes are called hyperlink and...
Skip Link

A skip link is a anchor link that permits to jump in the tab order to: an element or from one element to another The scroll is created by a anchor with a fragment uri. With bootstrap 5 and the...
Card Puncher Data Processing
UI - Scrolling

Scrolling means moving a visual component (text, image, ...) into view. A scrolling mechanism that is visible on the screen may be: a scroll bar or a panner It can be done with: navigation...
URI - Fragment (Ref, Reference)

The fragment is the last part of a URI An URI has the following syntax with the #fragment being the fragment The value of the fragment must be encoded. The fragment will cause the browser to scroll...
What is the Tab Order (Keyboard focus navigation)

The tab order is the order of interactive elements such as: links and form controls You can loop through this sequence in the browser by going to the address bar (alt+d) and pressing the tab...

Share this page:
Follow us:
Task Runner