Internet Explorer is not supported by Design Library

The last version of Internet Explorer, version 11, was released on October 17, 2013. This is a very long time ago when taking into account the rapid development of web technologies. These days it is often difficult and time consuming to get modern technologies to work well in this old browser. More and more frameworks are dropping support, and even Microsoft themselves has announced that they will fully drop support for IE in their own services in 2021.

Consequently, we have decided to not include support for IE in the Design Library website.

Luckily, there are modern options in active development. Please use Firefox, Edge or Chrome instead.

Browser scroll bars

This pattern states how you should think about when using scroll bars in a browser and in a component.

Guidelines

Short description

A scroll bar is a control for moving the view of an area that is too large to be entirely visible in its display region. It can indicate how far you have scrolled on a page or how far you have scrolled within an element that has overflowing content that is scrollable.

Scroll bars behave differently depending on what operating system and browser the user has. They can be obtrusive and unobtrusive depending on what operating system the user has on their device.

Page scroll bars

The scroll bar that is connected to how far you have scrolled on a page should not be altered since provides native functionality based on the operating system and browser. Overriding styling or functionality removes native functionality that is already implemented in the operating system and browser.

Examples of such functions are:

  • MacOS: when hovering the scroll bar it becomes bigger and gets a background and inner border.
  • IOS: custom scroll bars are not supported after IOS 14

 

Overflow scrollbars

Scroll bars that are shown when content is overflowing within an element on the webpage can be altered in such a way that it maintains SEB visual design language. In this case we define a custom scroll bar design that should look like the one in the image below of a cookie consent dialog. The reason for this is because Windows often implements an obtrusive scrollbar that has a negative impact of the visual design of the interface.

A picture of the cookie consent modal on SEB.se. In this modal the default design for scroll bars inside components is used.

Custom scroll bar design in a modal with overflowing content.

 

Code

Code for styling can be found in the Public web repository on Github (an account is needed). 

 

Page last updated

Feedback

Was this helpful?