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 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 (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 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" 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
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
- Mousover Stylized Scrollbar Generator: http://www.draac.com/mouseover-scrollbars.html
- 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
- $(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
- 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
- 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)
- Basic concepts of CSS Scroll Snap: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Scroll_Snap/Basic_concepts
- Browser compatibility and Scroll Snap: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Scroll_Snap/Browser_compat
- CSS Scroll Snap Updated in Firefox 68: https://hacks.mozilla.org/2019/06/css-scroll-snap-updated-in-firefox-68/
- jQuery scrollTop: https://api.jquery.com/scrollTop/