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 ¹⁾

Element.scrollIntoView

Devtool

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

What is the scroll location ?

ScrollTop

ScrollTop ²⁾ 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; };

Rendered by WebCode

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.

Scroll magic Class toggle + CSS3 class of animate.css (More example to trigger function based on scroll event) - great visual debugging features
https://wowjs.uk/ + animation via animate.css based
Delighters - Class toggle with naming contention for the class on enter and exit
Animate on Scroll with its own animation (animation is triggered by an Anchor (ie element on the screen that should trigger animation)
onScreen - action when enter or exit the viewport
In-view (deprecated) + class toggle
ScrollSpy (detect enter and exit)
peekaboo - Animation on enter

Reveal on Scroll

Class toggle

Add and suppress class while you scroll

Slide presentation

Presentation:

https://revealjs.com

Full page vertical scrolling:

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

https://gomakethings.com/how-to-animate-scrolling-to-anchor-links-with-one-line-of-css/

Disable

You disable:

the scrolling by disabling the overflow

disable-scrolling {
   overflow-y: hidden;
}

disabling the keydown default event with the keydown event. See the example

Scroll Depth Tracking

https://scrolldepth.parsnip.io/ - A Google Analytics plugin for measuring page scrolling
Automatically tracks how far down the page a user scrolls.

Story Telling

https://wsj.github.io/two-step/ - A JavaScript library for scrollytelling, by The Wall Street Journal.

¹⁾

When can you add fragment target element to enable scrolling

²⁾

ScrollTop