Browser - Scroll

About

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.

Manually

Via the scrollbar

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

Click

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)

Devtool

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

What is the scroll location ?

ScrollTop

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)
jQuery(window).scrollTop()

ScrollLeft

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

http://callmecavs.com/jump.js/

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

Scroll to anchor

Disable

You disable:

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

Scroll Depth Tracking

Story Telling


Powered by ComboStrap