Scrollbars

From BC$ MobileTV Wiki
(Redirected from Scrolling)
Jump to: navigation, search

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.


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.



Tools


Resources


Tutorials


External Links

References

  1. Basic concepts of CSS Scroll Snap: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Scroll_Snap/Basic_concepts
  2. Browser compatibility and Scroll Snap: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Scroll_Snap/Browser_compat
  3. CSS Scroll Snap Updated in Firefox 68: https://hacks.mozilla.org/2019/06/css-scroll-snap-updated-in-firefox-68/
  4. jQuery scrollTop: https://api.jquery.com/scrollTop/

See Also

HCI | Browser | AJAX | HTML