Lead: Femi ONGOING

Description

Scroll is a user interaction component used to allow for the reveal of extra content which would otherwise be unable to be displayed within the existing UI real estate. They can be used within containers of the page layout and also within individual components.

Types

<<use this section only if the component has several types that each requires its own page e.g. table, collapsible table>>

<<If you are using this section, then Usage & Behaviour should be used only for the Common functionalities in the page>>

Type	Usage
Fixed Scroll	When a fixed amount of content is loaded into a viewable container or component that is not large enough to display all at once, a horizontal or vertical scrollbar is shown to enable the remaining content to be moved into view.
Infinite Scroll	When a large undefined amount of content is available for a viewable container or component that is not large enough to display all at once, a horizontal or vertical scrollbar is shown to enable more content to be continually loaded into view.
Pagination	When a large defined amount of content is available for a viewable container or component that is not large enough to display all at once, a list of page numbers is shown to enable discreetest pages of content to be loaded into view.

Usage & Behaviour

<<use a visual for each sub-section>>

All default browser scroll behaviours are enabled by default. Operating sytem and browser defaults such as scroll inertia, scroll wheel support, gesture support and any user customisations should all behave as factory designed.

General guidelines

<<describes the component, use sub-section when they are relevant to the components>>

Example for heading in general

<<use heading 3>>

Text (Headings, labels, microcopy, help text Etc..) ( how to write microcopy for that component. For example, in lists the list items must be grammatically parallel and don’t mix active and passive voice etc)
Format / structure (describe the objects the component is made of and are optional e.g. search bar in a table) (for search component include - variations, results)(for tabs - Number of tabs)
Content (for example, in dropdowns and lists)
Length (e.g. length of list)
Order (e.g. order of drop down menu)
Placement or Positioning (when this is important, e.g. toast message)
Internal Logic (when explaining how to use different components inside the current component. For example, when to use radio buttons, checkboxes, and fields in a form)
Default section or Default values

States

<<e.g. active disabled, error, hover, temporary (spinner size), empty etc...>>

Interaction

<<for example, how to change a value – type, arrows, use slider>>

<<use Click target to describe the interaction>>

Best practices

<<e.g. Slider should display a .label its on>>

Design

Zeplin link	Screen thumbnail
https://zpl.io/bo9RLGX

Code

Currently only webkit based web browsers (such as Chrome & Safari) fully support native scrollbar custom styling to the degree required to conform to our visual design guidelines. It is therefore recommended to leave all non webkit browsers at their native scrollbar visual design in order to aid accessibility and consistency, rather than attempting to re-implement scrollbars across each environment. Our implementation below follows this recommendation.