Scrollbars

Scrollbars are visual UI controls for dragging a webpage or content pane up or down, left or right to reveal information not visible in a single webpage or content pane. Put another way they are a way of dealing with content exceeding a viewing area based on the height/width, size of the font, length of the multimedia (text/image/audio/video).

Scrolling

Scrolling Content (also used to be referred to as Scrolling DIVs in DHTML days) is a visual effect usually used for moving content on the page to give a more interactive experience, or, perhaps to fit a larger amount of information in a smaller area. While the technique is especially useful when the space a piece of content takes up exceeds the user's available screen real estate or viewing/display area based on sizing (i.e. horizontally or vertically), it is also commonly used just for flashiness or as a UI/UX cue to gain the user's attention, and potentially other similar reasons.

Infinite Scrolling

Infinite Scrolling (also referred to as Progressive Scrolling) is one of a select few truly cutting-edge (at the time) and beneficial new possibilities for web technologies and navigation paradigms that AJAX technologies introduced. It allows the browser to load a single page worth of data at a time, but rather than requiring the user to click a link to go forward/backwards while navigating the page's data, it enables them to simply scroll upwards/downwards and will load new data dynamically, only after it has been requested.

Auto-scroll

Auto-scroll is a feature whereby the "offscreen" or "out of main view" information typically accessed only by a user manually clicking and scrolling using scrollbars, pagination, left/right/up/down arrows, etc... is instead set in motion on a schedule periodically (timed slider, i.e. pivot scroller), synchronized to move together with progress on another media item or interactivity area (i.e. Lyrics/ClosedCaptions/Subtitles synched to Audio/Video) or automated to constantly automatically move (constantly animated information scroller, i.e. News Ticker).

Smooth Scrolling

"Smooth Scrolling" is a feature where the scrollbar will fluidly move between areas.

• CSS scroll-behavior: https://css-tricks.com/almanac/properties/s/scroll-behavior/ (scroll-behavior: smooth)
• Smooth Scrolling with CSS .vs. jQuery approach: https://css-tricks.com/snippets/jquery/smooth-scrolling/
• Smooth Scrolling and Accessibility: https://css-tricks.com/smooth-scrolling-accessibility/
• Default vs Smooth Scrolling example: https://codepen.io/chriscoyier/embed/nHEDj

Scroll Snap

In contrast to "Smooth Scrolling", Scroll Snap is a subset that prevents scrolling "in-between" specific content areas at all, for instance if you have a list of items the user will scroll, any gaps/padding/spacing or decorative text/images between the main list items the scrollbar will skip those and lock (or "snap") only on your main content areas as you've marked/indicated.

• CSS Nugget - Scroll Snap: https://codepen.io/codyhouse/pen/dyXPVOb

Tools

• Mousover Stylized Scrollbar Generator: http://www.draac.com/mouseover-scrollbars.html

Resources

• Comprehensive guide to Scrolling DIVs: http://jdstiles.com/java/scrollscripts.html
• DHTML Comprehensive Browser Compatibility Checklist -- Scrolling: http://www.gtalbot.org/DHTMLSection/ScrollingTBody.html
• Scrolling Div Content with Graphical Scrollbars: http://www.dyn-web.com/code/scroll/ | Demonstration (Horizontal, Vertical, etc)
• MDN -- CSS Scroll Snap: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Scroll_Snap

Tutorials

• How to Scroll a Page With JavaScript: http://www.mediacollege.com/internet/javascript/page/scroll.html
• $(window).scrollTop() vs. $(document).scrollTop() .vs. window.scrollTo: https://stackoverflow.com/questions/5371139/window-scrolltop-vs-document-scrolltop
• jQuery scrollTop example: https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_eff_animate_smoothscroll
• Getting window size and scroll bars position in JavaScript/DHTML: http://www.softcomplex.com/docs/get_window_size_and_scrollbar_position.html
• Implementing infinite scrolling with jQuery: http://ajaxian.com/archives/implementing-infinite-scrolling-with-jquery
• Build an Infinite Scrolling Photo Banner With HTML and CSS: https://designshack.net/articles/css/infinitephotobanner/ | DEMO
• How to Pause a CSS3 Animationbased "Marquee" on Hover: https://www.quackit.com/css/codes/marquees/how_to_pause_a_marquee_on_hover.cfm

External Links

• Basic (manual scroll) div content: http://www.quackit.com/html/codes/scroll_box_color.cfm
• jQuery Infinite Scroll from Wikia (same solution as above, different article): http://www.webresourcesdepot.com/load-content-while-scrolling-with-jquery/
• CustomizeGoogle is a suite of Google customizations, optimizations and improvements: http://www.customizegoogle.com/ (covering everything from progressively scrolling "streamed" results, to blocking Google ads, to enabling faster and more efficient saving/retrieval of search results)

See Also

HCI | Browser | AJAX | HTML