CSS overflow-style

• CSS3 overflow
• CSS2 overflow
• overflow-x
• overflow-y
• marquee-style
• marquee-play-count
• marquee-speed
• marquee-direction
• Scroll Boxes
• CSS3 Properties
• CSS properties

The CSS overflow-style property is used for specifying the scrolling method/s for elements that overflow.

If the contents of an element are too large to fit inside the element (i.e. they "overflow"), the overflow property can be used to specify how the contents should be displayed. One option of the overflow property is that the content should scroll. If the "scroll" option is effected, the overflow-style property specifies the preferred scrolling method. For example, the outer container could grow scroll bars. Or, the element could become a "marquee", where the content scrolls across the element, eventually resulting in all the content having been displayed.

Note that at the time of writing, browser support for the overflow-style property was limited or non-existent. Therefore, the examples on this page may not work as expected (at least until browsers start to support this property).

Also, this property is still under development by the W3C, which means that it may change at any time.

Syntax:	`overflow-style: value`
Example	`overflow-style: marquee;`
Try it yourself!	<!doctype html> <html> <head> <style type="text/css"> .example { font:12px arial, helvetica, sans-serif; width:100px; height:100px; padding:10px; background-color: yellowgreen; border: 20px solid rgba(0,0,0,0.3); overflow: scroll; overflow-style: marquee; } </style> </head> <body> <div class="example"> And the longest place name in the world is... Taumatawhakatangihangakoauauotamateapokaiwhenuakitanatahu in New Zealand! </div> <p>Note that at the time of writing, this property had no browser support. Therefore, if this example is not working as expected, your browser/user agent might not support this property.</p> </body>
Possible Values:	The value can be either `auto`, meaning no preference, or a list of methods in order of preference. The browser/user agent will use the first method in the list that it supports. If it supports none, it will use `auto`. `auto` Specifies that the scrolling method should be automatically determined by the browser/user agent. `marquee-line` Specifies that a marquee should scroll the content horizontally (i.e. for content that overflows to the left or right). `marquee-block` Specifies that a marquee should scroll the content vertically (i.e. for content that overflows above or below the content box). Dropped Values The following values were previously included in the CSS3 (draft) specification for this property, however, at the time of writing, they appear to have been dropped from the CSS3 specification. They've been included here for reference, as it's possible that they may return to the spec at some stage. `scrollbar` Specifies that the scrolling method should be with scrollbars. That way, the user can use vertical scrollbars to scroll down/up or horizontal scrollbars to scroll left/right. `panner` Specifies that a "panner" should be used to assist the user in viewing all the content. A panner is typically a rectangle shown in one corner of the element, with a smaller rectangle inside. The larger rectangle represents all of the content, while the smaller rectangle can be moved around to view a different part of the content. `move` Specifies that the scrolling method should be "move". This means that the user can move the content around within the content box directly. For example, the cursor might turn into a hand or cross of four arrows, which indicates that the mouse (or other pointing device) can be used to "click and drag" the content around. `marquee` Specifies that the scrolling method should be "marquee". A marquee is an effect where, the content moves autonomously, without the need for the user to do anything. Typically, a marquee will result in the content scrolling horizontally or vertically. Although the content is too large to fit within the outer container, eventually, all of it will be displayed as the content has moved across the content box. Often, a marquee will keep scrolling so that, in the event the user missed some content the first time around, he/she will have further opportunity to view the content as it passes for a second, third, fourth, ... etc time.
Initial Value:	`auto`
Applies to:	Non-replaced block-level elements and non-replaced 'inline-block' elements
Inherited:	Yes
Media:	Visual

Browser Compatibility

At the time of writing, CSS3 was still under development and browser support for many CSS3 properties was limited or non-existent. For maximum browser compatibility many web developers add browser-specific properties by using extensions such as -webkit- for Safari and Google Chrome, -ms- for Internet Explorer, -moz- for Firefox, -o- for Opera etc. As with any CSS property, if a browser doesn't support a proprietary extension, it will simply ignore it.

This practice is not recommended by the W3C, however in many cases, the only way you can test a property is to include the CSS extension that is compatible with your browser.

Be aware that if you choose to use the proprietary CSS extensions in a live environment, your code will not pass any W3C CSS validation, as the browser-specific properties are not valid W3C properties.

Many of the CSS3 examples on this website include these browser specific properties. If they weren't included, most of the examples wouldn't work for most users (at least, not until possibly years after the article was written).

The major browser manufacturers are working to support the W3C properties, and eventually, you will be able to omit these browser-specific properties.

CSS Tutorial

CSS Codes

CSS Examples

CSS Reference

CSS overflow-style

Related:

Dropped Values

Browser Compatibility

Enjoy this page?

HTML/MARKUP

CSS & DESIGN

SCRIPTING

DATABASE

WEB HOSTING