Skip to main content
-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 Windows Store apps using JavaScript, 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 Tonon-replaced block-level elements and non-replaced inline-block elements
Mediainteractive
Inheritedtrue
Initial Valueauto

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.

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.


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;
}

<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:

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

See also

CSSStyleDeclaration
Windows Store apps using JavaScript Samples: HTML scrolling, panning and zooming sample
Internet Explorer Samples: Scrolling, panning, and zooming with touch input