UI - Scrolling

About

All about scrolling

A scrolling mechanism that is visible on the screen may be:

  • a scroll bar
  • or a panner

Scroll Top Position

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
console.log("Scroll Top: "+document.querySelector('html').scrollTop);
  • Jquery The windows position from the the top of the page (starts at zero and increase when you scroll down)
jQuery(window).scrollTop()

Parallax

Parallax scrolling is a technique where background images move slower than foreground images. This creates an illusion of depth — things that are closer to us move faster, things that are further away move slower.

See parallax scrolling

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