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)
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 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.
- 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
- peekaboo - Animation on enter
Reveal on Scroll
Class toggle
Add and suppress class while you scroll
Slide presentation
Presentation:
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
Story Telling
- https://wsj.github.io/two-step/ - A JavaScript library for scrollytelling, by The Wall Street Journal.