-ms-overflow-style property

Gets or sets the scrolling behavior for elements that overflow.

This property is read/write.

Syntax

-ms-overflow-style: auto | none | scrollbar | -ms-autohiding-scrollbar

Property values

One or more of the following scrolling method values, in the order of preference.

auto

Initial value. Indicates the element inherits its -ms-overflow-style from its parent element.

In Internet Explorer for the desktop, on the root element, auto behaves like scrollbar.

In Internet Explorer in the Windows UI, on the root element, auto behaves like -ms-autohiding-scrollbar.

none

Indicates the element does not display scrollbars or panning indicators, even when its content overflows.

Unlike overflow: hidden, elements with -ms-overflow-style: none can still be scrolled via touch panning, keyboard, or mouse wheel.

scrollbar

Indicates the element displays a classic scrollbar-type control when its content overflows.

Unlike -ms-autohiding-scrollbar, scrollbars on elements with the -ms-overflow-style property set to scrollbar always appear on the screen and do not fade out when the element is inactive.

Scrollbars do not overlay content, and therefore take up extra layout space along the edges of the element where they appear.

-ms-autohiding-scrollbar

Indicates the element displays auto-hiding scrollbars during mouse interactions and panning indicators during touch and keyboard interactions.

Auto-hiding scrollbars overlay content, and therefore do not require extra layout space.

CSS information

Applies To	non-replaced block-level elements and non-replaced inline-block elements
Media	interactive
Inherited	true
Initial Value	auto

Remarks

The -ms-overflow-style property only has an effect on elements that overflow using the overflow property.

When using auto-hiding scrollbars, you should ensure your content has sufficient padding to prevent interactive content from being obscured beneath the scrollbar.

This property requires Windows 8 or later.

Examples

This example shows two div elements that each contain text. In the first div element, the -ms-overflow-style property is set to none. In the second div element, the -ms-overflow-style property is set to scrollbar.

CSS


div {
  width: 150px;
  height: 150px;
  border-style: solid;
  border-width: thin;
  font-family: sans-serif;
  float: left;
  margin-right: 10px;
  overflow: auto;
}
.of_none {
  -ms-overflow-style: none;
}
.of_scrollbar {
  -ms-overflow-style: scrollbar;
}

HTML


<body>
  <div class="of_none">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
  </div>
  <div class="of_scrollbar">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
  </div>
</body>

The following images show the result. In the first div element, text overflows but the div object does not display scroll bars:

An image showing the -ms-overflow-style property set to scrollbar.

In the second div object, text overflows and the div object displays a vertical scroll bar: