Specifies the preferred scrolling methods for elements that overflow.
- Initial value
- Applies to
- non-replaced block-level elements and non-replaced inline-block elements
- Computed value
- as specified
- CSS Object Model Property
- Initial value. Indicates no preference.
- Indicates the element does not display any scrolling mechanism, even when its content overflows.
Unlike overflow: hidden, elements with overflow-style: none can still be scrolled via touch panning, keyboard, or mouse wheel.
- Indicates the element displays a classic scrollbar-type control when its content overflows.
Scrollbars do not overlay content, and therefore take up extra layout space along the edges of the element where they appear.
- A panner is typically a rectangle shown in one corner of the element, with a smaller rectangle inside. The larger rectangle represents all the available content of the element and the smaller one the visible part. The smaller rectangle can be moved around by the user to move the content of the element accordingly.
- The value ‘move’ refers to a method where the user can move the content of the element directly (rather than indirectly by moving a scrollbar or a panner). Typically, the mouse pointer changes into a hand or a cross of four arrows to indicate that the user can drag the content around with the mouse. Sometimes the user needs to explicitly activate the move mode and in that case he often can use both dragging (with the mouse) and key events to move the content.
- The marquee effect (value ‘marquee’) consists of the content moving autonomously, without any user events to control it. A user who waits long enough will eventually see all the content that overflows.
/* Top preference for a scrolling mechanism is a panner. If not available no visible scrolling mechanism should be displayed */ overflow-style: panner, none;
CSS Basic Box Model and CSS Marquee Module Lelel 3 both specify a different overflow-style property. This page is based on the CSS Basic Box Model, because if marquee is going to be supported, that would have a bigger chance of being supported.
The 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.
Microsoft Developer Network: [Windows Internet Explorer API reference Article]