Versions Compared

Version Old Version 27 New Version Current
Changes made by

Guy Hivroni (Unlicensed)

Femi

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.


...

Status
colourYellow
titleongoing
Table of Contents

Description

Scroll is a user interaction component used to allow for the A Scrollbar allows the controlled reveal of extra content which would otherwise be unable to be displayed not fit within the existing allocated UI real estatearea. They Scrollbars can be used within containers of the page layout and also within individual components.

...

Types

Type

Usage

Fixed

Scroll

Scrollbar

When a fixed amount of content is loaded into a

viewable

container or component that is not large enough to display it all at once, a horizontal or vertical scrollbar

is shown to enable

enables the remaining content to be moved into view.

Infinite

Scroll

Scrollbar

When a large undefined amount of content is available for a

viewable

container or component that is not large enough to display it all at once, a horizontal or vertical scrollbar

is shown to enable

enables more content to be dynamically loaded into view.

Usage & Behaviour

Choose the appropriate type (as defined above) according to the amount of content you need to display and the content area available.

Usage & Behavior

Note

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 language (using the CSS Overflow property) in order to aid consistency in behaviour behavior and accessibility, rather than attempting to re-implement scrollbars across each environment. Our implementation below follows this recommendation.

General guidelines

These are the essential usability guidelines for scrolling and scrollbars:

Content

  • Display all important information above the fold. Users often decide whether to continue or leave based on what they can see without scrolling.

Placement

Placement and positioning

  • Always offer a scrollbar if an area has scrolling content. Don't rely on auto-scrolling or on dragging,

    which people might not notice

    as users may not realise it's an option. The scrollbar provides a visual clue that more content is available.

  • Hide scrollbars entirely if all content is visible. If

    people

    users see a scrollbar, they will assume there's additional content and

    will

    be frustrated if they can't scroll.

Default state

Comply with the default operating system standards in order to maintain platform familiarity. All default browser scroll

...

behaviors should be enabled by default. Operating system and browser defaults such as scroll inertia, scroll wheel support, gesture support, and any OS user customisations should all behave as factory designed.

Content

Display all important information above the fold. Users often decide whether to continue or leave based on what they can see without scrolling.

States

There are no focused or disabled states for scroll scrollbars as those these states are handled by the parent component in which the scroll is attached.

State

Scroll

Regular

Horizontal

Vertical

Image Removed
Image Added

Hover

Horizontal

Vertical

Image Removed
Image Added

Active

Horizontal

Vertical

Image Removed
Image Added

Regular

Vertical

Horizontal

Image Removed
Image Added

Hover

Vertical

Horizontal

Image Removed
Image Added

Active

Vertical

Horizontal

Image Removed
Image Added

Interaction

Scroll interaction is governed by the chosen device, operating system, and browser the application is running on. It is advised that those default interaction behaviours be unaltered being used. The default interaction behaviors shouldn't be changed, primarily for conformance and accessibility reasons. The following are the required interaction recommendations common to all.

Input device

Discrete scroll

Continuous scroll

Keyboard

  • Focus on (scrollable area)

    • + Up & Down keys

    • + PageUp & PageDown keys

    • + Home & End keys

  • Focus on (scrollable area) + Hold Up & Down keys

Mouse

  • Click on (scroll component - above or below scrollbar handle)

  • Click on (scrollbar handle) + drag

  • Hover over (scrollable area) + scroll wheel

Trackpad

  • Click on (scroll component - above or below scrollbar handle)

  • Click on (scrollbar handle) + drag gesture

  • Hover over (scrollable area) + scroll gesture

Best practices

...

For best results follow all the usage guidelines detailed in this document. For more best practices tips and suggestions, see below.

...

Make sure the browser back button works properly. When users follow a link, and then click the Back button, they expect to return to the same spot on the original page. Traditionally, using a browser’s back button will generally set the scroll position back to the previous position rather than to the top of the page. However, some modern development frameworks do not offer this functionality by default. Losing their previous position forces users to have to scroll through content they have already seen and manually find their previous position, hence endeavour to make sure this feature is enabled.

...

  • Avoid scrolling within scrolling.

  • Make sure the browser back button works properly in regard to saving the scrollbar position.

  • Avoid scroll hijacking. Applications that implement scroll hijacking take control

...

  • of

...

  • the scroll and override a basic function of the web browser.

  • Use sticky navigation. Long scrolling can make navigation problematic

...

  • . If the user loses visibility of the navigation

...

  • menu (for the container

...

  • , table

...

  • etc.)

...

  • when

...

  • they scroll down, they will have to scroll all the way back

...

  • to the top to perform an action. Instead, use a sticky (persistently visible) navigation menu to make moving around the app fast and easy.

  • Avoid horizontal scrolling when possible.

  • Provide visual feedback when loading new content

...

  • .When using

...

  • infinite scroll

...

  • , it needs to be clear to the user that content is being dynamically loaded. Use a Progress Indicator to show that new content

...

  • will soon appear on the page.

Accessibility compliance

In general each component should be A11y complied, please follow the 3 guidelines linked belowUnless otherwise specified, see our general compliance information in Fundamentals - Accessibility.

Focus management

The scroll scrollbar component itself is not keyboard focusablecannot be focused via the keyboard. Instead, it is the scrollable content area itself that is required to be focusable in order for the scroll component to work. Please see the general guidelines described in Keyboard & Focus Management Guidelines to make sure the it’s derived from the focus of the page components. Please see the /wiki/spaces/UX/pages/308969693 to ensure that scrollable content areas are properly supported.

Assistive scrolling bindings vary with device, operating system, and browser but . Nevertheless, the key bindings described in the 'Interaction' section Scroll#Interaction section above should be supported as a minimum:.

Screen reader support 

As our recommendation is the use of it's recommended to use the native browser scrollbar component, screen reader support is already built in. Users are notified about the existence of a scrollbar on the page scrollbars when they encounter a scrollable area with the 'overflow' property defined as 'auto' or 'scroll'. Make sure the scrollable area itself also supports screen readers for content or behaviour where needed - see Screen Reader Guidelinessee the /wiki/spaces/UX/pages/308248620.

Design

Zeplin link

Screen thumbnail

https://zpl.io/bo9RLGX

Image Modified

Code

Note

Scroll A scrollbar is enabled by applying the appropriate CSS Overflow property value to a content area.

Html macro
sanitizefalse
<link rel="stylesheet" href="https://ux.verint.com/bootstrap-4.0.0/dist/fonts/css/verint_lux.css">
<link rel="stylesheet" href="https://ux.verint.com/bootstrap-4.0.0/dist/css/bootstrap.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ux.verint.com/bootstrap-4.0.0/dist/js/bootstrap.bundle.js"></script>
<script src="https://ux.verint.com/bootstrap-4.0.0/dist/other/accessibility.js"></script>
<script src="https://ux.verint.com/bootstrap-4.0.0/dist/other/prism.min.js"></script>
<link rel="stylesheet" href="https://ux.verint.com/bootstrap-4.0.0/dist/other/prism-coy.min.css">

<style>
::-webkit-scrollbar {
	border-radius: 7px;
	background-color: #ddd;
}

::-webkit-scrollbar:vertical {
	width: 7px;
}

::-webkit-scrollbar:horizontal {
	height: 7px;
}

::-webkit-scrollbar-thumb {
	border-radius: 7px;
	background-color: #999999;
}

::-webkit-scrollbar-thumb:vertical {
	width: 7px;
}

::-webkit-scrollbar-thumb:horizontal {
	height: 7px;
}

::-webkit-scrollbar-thumb:hover {
	border: solid 1px #007aff;
}

::-webkit-scrollbar-thumb:active {
	border: solid 1px #005cbf;
}

body {
	scrollbar-arrow-color: #FF3300;
	scrollbar-3dlight-color: #999999;
	scrollbar-highlight-color: #999999;
	scrollbar-face-color: #999999;
	scrollbar-shadow-color: #999999;
	scrollbar-darkshadow-color: #999999;
	scrollbar-track-color: #ddd;
}
</style>

<div class="card">
			<div class="card-header">Scroll Text Area <button id="toggleMarkup" type="button" class="btn btn-sm btn-outline-primary btn btn-fixed-width float-right m-0" onclick="$('pre').toggle()">Toggle Markup</button></div>
			<div class="card-body">
				<form>
					<div class="form-group row">
						<label for="inputKey" class="col-lg-2 col-form-label col-form-label-sm">Regular</label>
						<div class="col-lg-4">
							<textarea class="form-control form-control-sm" placeholder="Guiding Text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eu lacus in orci semper interdum congue ac leo. Nam dictum eleifend velit, eget aliquet ex sodales et. Ut convallis massa in justo tristique malesuada. Pellentesque eros ex, viverra et blandit id, aliquet vel libero. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi scelerisque enim non erat tincidunt, quis consectetur ipsum cursus. Fusce finibus posuere consequat. Duis luctus, tellus at pretium gravida, nunc turpis finibus mauris, ac imperdiet neque tellus non nunc. Morbi finibus rhoncus lacus a sagittis. Aenean dictum, turpis et molestie ullamcorper, justo tortor mattis lectus, laoreet egestas lacus lacus a nunc. Nullam velit risus, scelerisque eget justo non, feugiat mollis ex. Nullam ac rutrum odio. Fusce blandit sed ligula sit amet convallis. Suspendisse ac dignissim massa, nec interdum leo.

Mauris luctus metus ac finibus volutpat. Quisque suscipit at lacus quis cursus. In sagittis ex eget pulvinar luctus. Nulla nec rhoncus nulla. Donec risus odio, pulvinar at commodo eu, congue euismod nulla. Proin massa nulla, placerat nec odio vel, gravida venenatis ligula. Maecenas mattis risus id odio viverra, quis pulvinar urna mollis.

Integer sodales molestie dapibus. Aenean sit amet eros vel tortor imperdiet interdum. Vestibulum in lectus ex. Fusce nec vehicula lorem. Nullam varius quam eget velit faucibus ornare. Nullam vulputate augue vitae malesuada finibus. Proin eget turpis justo. Quisque eu lacus sit amet leo tempor posuere sit amet vitae dolor. Vivamus et mauris turpis. Etiam blandit dapibus diam. Maecenas non lacinia tellus. Proin at nunc lacinia, lacinia nisl in, fermentum nisl. Nulla sed venenatis erat.

Nulla ultrices est dui, ac ornare enim commodo in. Nunc pulvinar dictum risus at auctor. Mauris vitae lorem sodales, dignissim elit non, sollicitudin lorem. Vestibulum quis dictum quam. In fringilla egestas erat a sollicitudin. Duis risus nisl, facilisis at nunc ac, ultricies vestibulum justo. Suspendisse sed metus varius, faucibus nisl a, faucibus magna. Donec lectus diam, hendrerit et lectus sed, accumsan tincidunt neque.

Curabitur eros massa, fringilla tempor fringilla sed, lobortis euismod ligula. Donec et condimentum est. Nullam consequat sem id convallis ullamcorper. Ut ac laoreet ipsum, vel varius nisl. Fusce auctor lorem ac malesuada sollicitudin. Ut sodales fermentum dolor, quis lobortis nisl. Suspendisse tempus enim ac nulla placerat, pretium dignissim tellus molestie. Vivamus ut tempus elit. Donec mollis lectus vitae diam dictum, eu pretium enim aliquam. Proin congue dictum eleifend. Mauris convallis purus sollicitudin leo tempus, nec porta ante tempor. Sed at scelerisque quam. Vestibulum viverra turpis et feugiat pulvinar. Nam suscipit lacinia diam in pharetra. Vestibulum rutrum tincidunt auctor. Phasellus pharetra neque vitae eleifend dictum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eu lacus in orci semper interdum congue ac leo. Nam dictum eleifend velit, eget aliquet ex sodales et. Ut convallis massa in justo tristique malesuada. Pellentesque eros ex, viverra et blandit id, aliquet vel libero. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi scelerisque enim non erat tincidunt, quis consectetur ipsum cursus. Fusce finibus posuere consequat. Duis luctus, tellus at pretium gravida, nunc turpis finibus mauris, ac imperdiet neque tellus non nunc. Morbi finibus rhoncus lacus a sagittis. Aenean dictum, turpis et molestie ullamcorper, justo tortor mattis lectus, laoreet egestas lacus lacus a nunc. Nullam velit risus, scelerisque eget justo non, feugiat mollis ex. Nullam ac rutrum odio. Fusce blandit sed ligula sit amet convallis. Suspendisse ac dignissim massa, nec interdum leo.

Mauris luctus metus ac finibus volutpat. Quisque suscipit at lacus quis cursus. In sagittis ex eget pulvinar luctus. Nulla nec rhoncus nulla. Donec risus odio, pulvinar at commodo eu, congue euismod nulla. Proin massa nulla, placerat nec odio vel, gravida venenatis ligula. Maecenas mattis risus id odio viverra, quis pulvinar urna mollis.

Integer sodales molestie dapibus. Aenean sit amet eros vel tortor imperdiet interdum. Vestibulum in lectus ex. Fusce nec vehicula lorem. Nullam varius quam eget velit faucibus ornare. Nullam vulputate augue vitae malesuada finibus. Proin eget turpis justo. Quisque eu lacus sit amet leo tempor posuere sit amet vitae dolor. Vivamus et mauris turpis. Etiam blandit dapibus diam. Maecenas non lacinia tellus. Proin at nunc lacinia, lacinia nisl in, fermentum nisl. Nulla sed venenatis erat.

Nulla ultrices est dui, ac ornare enim commodo in. Nunc pulvinar dictum risus at auctor. Mauris vitae lorem sodales, dignissim elit non, sollicitudin lorem. Vestibulum quis dictum quam. In fringilla egestas erat a sollicitudin. Duis risus nisl, facilisis at nunc ac, ultricies vestibulum justo. Suspendisse sed metus varius, faucibus nisl a, faucibus magna. Donec lectus diam, hendrerit et lectus sed, accumsan tincidunt neque.

Curabitur eros massa, fringilla tempor fringilla sed, lobortis euismod ligula. Donec et condimentum est. Nullam consequat sem id convallis ullamcorper. Ut ac laoreet ipsum, vel varius nisl. Fusce auctor lorem ac malesuada sollicitudin. Ut sodales fermentum dolor, quis lobortis nisl. Suspendisse tempus enim ac nulla placerat, pretium dignissim tellus molestie. Vivamus ut tempus elit. Donec mollis lectus vitae diam dictum, eu pretium enim aliquam. Proin congue dictum eleifend. Mauris convallis purus sollicitudin leo tempus, nec porta ante tempor. Sed at scelerisque quam. Vestibulum viverra turpis et feugiat pulvinar. Nam suscipit lacinia diam in pharetra. Vestibulum rutrum tincidunt auctor. Phasellus pharetra neque vitae eleifend dictum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eu lacus in orci semper interdum congue ac leo. Nam dictum eleifend velit, eget aliquet ex sodales et. Ut convallis massa in justo tristique malesuada. Pellentesque eros ex, viverra et blandit id, aliquet vel libero. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi scelerisque enim non erat tincidunt, quis consectetur ipsum cursus. Fusce finibus posuere consequat. Duis luctus, tellus at pretium gravida, nunc turpis finibus mauris, ac imperdiet neque tellus non nunc. Morbi finibus rhoncus lacus a sagittis. Aenean dictum, turpis et molestie ullamcorper, justo tortor mattis lectus, laoreet egestas lacus lacus a nunc. Nullam velit risus, scelerisque eget justo non, feugiat mollis ex. Nullam ac rutrum odio. Fusce blandit sed ligula sit amet convallis. Suspendisse ac dignissim massa, nec interdum leo.

Mauris luctus metus ac finibus volutpat. Quisque suscipit at lacus quis cursus. In sagittis ex eget pulvinar luctus. Nulla nec rhoncus nulla. Donec risus odio, pulvinar at commodo eu, congue euismod nulla. Proin massa nulla, placerat nec odio vel, gravida venenatis ligula. Maecenas mattis risus id odio viverra, quis pulvinar urna mollis.

Integer sodales molestie dapibus. Aenean sit amet eros vel tortor imperdiet interdum. Vestibulum in lectus ex. Fusce nec vehicula lorem. Nullam varius quam eget velit faucibus ornare. Nullam vulputate augue vitae malesuada finibus. Proin eget turpis justo. Quisque eu lacus sit amet leo tempor posuere sit amet vitae dolor. Vivamus et mauris turpis. Etiam blandit dapibus diam. Maecenas non lacinia tellus. Proin at nunc lacinia, lacinia nisl in, fermentum nisl. Nulla sed venenatis erat.

Nulla ultrices est dui, ac ornare enim commodo in. Nunc pulvinar dictum risus at auctor. Mauris vitae lorem sodales, dignissim elit non, sollicitudin lorem. Vestibulum quis dictum quam. In fringilla egestas erat a sollicitudin. Duis risus nisl, facilisis at nunc ac, ultricies vestibulum justo. Suspendisse sed metus varius, faucibus nisl a, faucibus magna. Donec lectus diam, hendrerit et lectus sed, accumsan tincidunt neque.

Curabitur eros massa, fringilla tempor fringilla sed, lobortis euismod ligula. Donec et condimentum est. Nullam consequat sem id convallis ullamcorper. Ut ac laoreet ipsum, vel varius nisl. Fusce auctor lorem ac malesuada sollicitudin. Ut sodales fermentum dolor, quis lobortis nisl. Suspendisse tempus enim ac nulla placerat, pretium dignissim tellus molestie. Vivamus ut tempus elit. Donec mollis lectus vitae diam dictum, eu pretium enim aliquam. Proin congue dictum eleifend. Mauris convallis purus sollicitudin leo tempus, nec porta ante tempor. Sed at scelerisque quam. Vestibulum viverra turpis et feugiat pulvinar. Nam suscipit lacinia diam in pharetra. Vestibulum rutrum tincidunt auctor. Phasellus pharetra neque vitae eleifend dictum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eu lacus in orci semper interdum congue ac leo. Nam dictum eleifend velit, eget aliquet ex sodales et. Ut convallis massa in justo tristique malesuada. Pellentesque eros ex, viverra et blandit id, aliquet vel libero. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi scelerisque enim non erat tincidunt, quis consectetur ipsum cursus. Fusce finibus posuere consequat. Duis luctus, tellus at pretium gravida, nunc turpis finibus mauris, ac imperdiet neque tellus non nunc. Morbi finibus rhoncus lacus a sagittis. Aenean dictum, turpis et molestie ullamcorper, justo tortor mattis lectus, laoreet egestas lacus lacus a nunc. Nullam velit risus, scelerisque eget justo non, feugiat mollis ex. Nullam ac rutrum odio. Fusce blandit sed ligula sit amet convallis. Suspendisse ac dignissim massa, nec interdum leo.

Mauris luctus metus ac finibus volutpat. Quisque suscipit at lacus quis cursus. In sagittis ex eget pulvinar luctus. Nulla nec rhoncus nulla. Donec risus odio, pulvinar at commodo eu, congue euismod nulla. Proin massa nulla, placerat nec odio vel, gravida venenatis ligula. Maecenas mattis risus id odio viverra, quis pulvinar urna mollis.

Integer sodales molestie dapibus. Aenean sit amet eros vel tortor imperdiet interdum. Vestibulum in lectus ex. Fusce nec vehicula lorem. Nullam varius quam eget velit faucibus ornare. Nullam vulputate augue vitae malesuada finibus. Proin eget turpis justo. Quisque eu lacus sit amet leo tempor posuere sit amet vitae dolor. Vivamus et mauris turpis. Etiam blandit dapibus diam. Maecenas non lacinia tellus. Proin at nunc lacinia, lacinia nisl in, fermentum nisl. Nulla sed venenatis erat.

Nulla ultrices est dui, ac ornare enim commodo in. Nunc pulvinar dictum risus at auctor. Mauris vitae lorem sodales, dignissim elit non, sollicitudin lorem. Vestibulum quis dictum quam. In fringilla egestas erat a sollicitudin. Duis risus nisl, facilisis at nunc ac, ultricies vestibulum justo. Suspendisse sed metus varius, faucibus nisl a, faucibus magna. Donec lectus diam, hendrerit et lectus sed, accumsan tincidunt neque.

Curabitur eros massa, fringilla tempor fringilla sed, lobortis euismod ligula. Donec et condimentum est. Nullam consequat sem id convallis ullamcorper. Ut ac laoreet ipsum, vel varius nisl. Fusce auctor lorem ac malesuada sollicitudin. Ut sodales fermentum dolor, quis lobortis nisl. Suspendisse tempus enim ac nulla placerat, pretium dignissim tellus molestie. Vivamus ut tempus elit. Donec mollis lectus vitae diam dictum, eu pretium enim aliquam. Proin congue dictum eleifend. Mauris convallis purus sollicitudin leo tempus, nec porta ante tempor. Sed at scelerisque quam. Vestibulum viverra turpis et feugiat pulvinar. Nam suscipit lacinia diam in pharetra. Vestibulum rutrum tincidunt auctor. Phasellus pharetra neque vitae eleifend dictum.</textarea>
						</div>
						<div class="col-lg-6">
							<pre class="language-html"><code><script type="prism-html-markup"><textarea class="form-control form-control-sm" placeholder="Guiding Text"></textarea></script></code></pre>
						</div>
					</div>
					<div class="form-group row">
						<label for="inputKey" class="col-lg-2 col-form-label col-form-label-sm"></label>
						<div class="col-lg-4">
							<textarea class="form-control form-control-sm" placeholder="Guiding Text">Lorem ipsum dolor sit amet, id vis ubique cotidieque, ex malis commune mea. Stet explicari in ius, eu sanctus intellegat mea. Mazim atomorum his te, idque nihil percipit an cum.</textarea>
						</div>
						<div class="col-lg-6">
							<pre class="language-html"><code><script type="prism-html-markup"><textarea class="form-control form-control-sm" placeholder="Guiding Text">Lorem ipsum dolor sit amet, id vis ubique cotidieque, ex malis commune mea. Stet explicari in ius, eu sanctus intellegat mea. Mazim atomorum his te, idque nihil percipit an cum.</textarea></script></code></pre>
						</div>
					</div>
				</form>
			</div>
		</div>