In order to access this site you need to enable JavaScript!

You are here: Reference > JavaScript > client-side > style handling > properties > browser specific extensions > webkitMarqueeStyle

webkitMarqueeStyle style property

Browser support:

Specifies or retrieves the style of scrolling in a marquee element.

To get similar functionality in all commonly used browsers, use the behavior property instead.

Syntax:

object.webkitMarqueeStyle;

You can find the related objects in the Supported by objects section below.

This property is read/write.

CSS page for this property: -webkit-marquee-style

Possible values:

The type of this property is string.

One of the following values:

alternate

The contents 'bounce'. Scrolls the contents to the end and then in the opposite direction.

inherit

Takes the value of this property from the computed style of the parent element.

none

Does not scroll the contents.

scroll

Starts to scroll the contents to the end and starts over.

slide

Starts to scroll the contents to the end and stops.

Default: scroll.

Example HTML code 1:

This example illustrates the use of the -webkit-marquee-style property:

<head>
    <style>
        .myMarquee {
            border: 1px dotted #000000;
            width: 200px;
            height: 60px;
            text-align: right;
            -webkit-marquee-direction: forwards;
            -webkit-marquee-increment: 6px;
            -webkit-marquee-repetition: infinite;
            -webkit-marquee-speed: fast;
        }

        .scroll {
            -webkit-marquee-style: scroll;
        }

        .slide {
            -webkit-marquee-style: slide;
        }
    </style>
</head>
<body>
    <marquee class="myMarquee scroll">
        scoll marquee<br />
        scoll marquee<br />
        scoll marquee
    </marquee>

    <marquee class="myMarquee slide">
        slide marquee<br />
        slide marquee<br />
        slide marquee
    </marquee>
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 2:

This example illustrates the use of the webkitMarqueeStyle property in JavaScript:

<head>
    <style>
        #myMarquee {
            border: 1px dotted #000000;
            width: 200px;
            height: 60px;
            text-align: right;
            -webkit-marquee-direction: forwards;
            -webkit-marquee-increment: 3px;
            -webkit-marquee-repetition: infinite;
            -webkit-marquee-speed: fast;
            -webkit-marquee-style: scroll;
        }
    </style>
    <script type="text/javascript">
        function ChangeMarquee (select) {
            var marquee = document.getElementById ("myMarquee");
            var selected = select.selectedIndex;
            var newValue = select.options[selected].text;

            if ('webkitMarqueeStyle' in marquee.style) {
                marquee.style.webkitMarqueeStyle = newValue;
            } else {
                alert ("Your browser doesn't support this example!");
            }
        }
    </script>
</head>
<body>
    <marquee id="myMarquee">
        first line<br />
        second line<br />
        third line
    </marquee>
    <select onchange="ChangeMarquee (this);" size="4">
        <option />alternate
        <option />none
        <option selected="selected" />scroll
        <option />slide
    </select>
</body>