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

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.

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

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

Powered by ComboStrap