Home >Web Front-end >HTML Tutorial >What is the code for scroll bar in html? How to set html scroll bar?

What is the code for scroll bar in html? How to set html scroll bar?

寻∝梦
寻∝梦Original
2018-09-04 11:30:5413697browse

This article mainly introduces the code of the scroll bar in html, as well as the usage of the marquee tag attribute of the html scroll bar code. Let us take a look at this article in detail

First we introduce the scroll bar code in html:

Today we introduce that the html scroll bar label is marquee.

ed126914ed1419bab26abf7cf307b7b9 label, which is a label that appears in pairs , the content between the first tag ed126914ed1419bab26abf7cf307b7b9 and the last tag 7204e33a7a23f6efcc788532e245c31b is the scrolling content. The attributes of the ed126914ed1419bab26abf7cf307b7b9 tag mainly include behavior, bgcolor, direction, width, height, hspace, vspace, loop, scrollamount, scrolldelay, etc. They are all optional.

Now let’s talk about setting the HTML scroll bar:

At this time, let’s take a look at how the marquee tag uses its attributes to implement the html scroll bar.

1.html The behavior attribute of the marquee tag:

The parameter value of the behavior attribute is one of alternate, scroll, and slide, which respectively indicates that the text scrolls back and forth and in one direction. Cyclic scrolling, scrolling only once, it should be noted that if the direction and behavior attributes appear in the ed126914ed1419bab26abf7cf307b7b9 tag at the same time, then the scrolling direction of scroll and slide will be based on the setting of the parameters in the direction attribute.

<marquee behavior="alternate">我来回滚动</marquee> 
<marquee behavior="scroll">我单方向循环滚动</marquee>
<marquee behavior="scroll" direction="up" height="30">我改单方向向上循环滚动</marquee> 
<marquee behavior="slide">我只滚动一次</marquee> 
<marquee behavior="slide" direction="up">我改向上只滚动一次了</marquee>

The styles are very nice, and they are all dynamic. Screenshots cannot be taken. If you are interested, you can practice it here. Just copy the above code and then go to //m.sbmmt.com/ Paste code/26516.html here and you can see the effect immediately. You don’t need to complete the code to display it. You can display a lot of things you want to see here.

This is just one of the attributes. There are several more attributes. Let’s take a look at them:

2.html marquee tag bgcolor attribute:

The background color of the text scrolling range. The parameter value is hexadecimal (form: #AABBCC or #AA5566, etc.) or a predefined color name (such as red, yellow, blue, etc.) . As shown below:

<marquee behavior=="slide" direction="left" bgcolor="red">我的背景色是红色的</marquee>

3.html The direction attribute of the marquee tag:

The direction of text scrolling. The parameter values ​​of the attribute include down, left, right, and up. Four single optional values, representing the scrolling direction down, left, right, and up respectively. As shown below:

    <marquee direction="right">我向右滚动</marquee> 
    <marquee direction="right">我向下滚动</marquee>

4.html The width and height attributes of the marquee tag:

The functions of the width and height attributes determine the size of the rectangular range of the scrolling text on the page . The width attribute is used to specify the width of the rectangle, and the height attribute specifies the height of the rectangle. The parameter value of these two properties can be a number or a percentage. The number represents the number of pixels (width or height) occupied by the rectangle, and the percentage represents the percentage (width or height) of the browser window occupied by the rectangle. As shown below:

    <marquee width="300" height="30" bgcolor="red">我宽300像素,高30像素。</marquee>

5.html The scrollamount and scrolldelay attributes of the marquee tag:

These two attributes determine the speed of text scrolling (scrollamount) and delay ( scrolldelay), the parameter values ​​are all positive integers. As shown below:

    <marquee scrollamount="100">我速度很快.</marquee> 
    <marquee scrollamount="50">我慢了些。</marquee> 
    <marquee scrolldelay="30">我小步前进。</marquee> 
    <marquee scrolldelay="1000" scrollamount="100">我大步前进。</marquee>

6.html The align attribute of the marquee tag:

This attribute determines the position of the scrolling text at the top, bottom, left and right of the inner border. You can also replace the content between ed126914ed1419bab26abf7cf307b7b9 and 7204e33a7a23f6efcc788532e245c31b with features such as images or other objects.

Notes on html marquee tags:

The default width of a marquee element is equal to the width of its parent element. If the marquee is inside a td that does not have a specified width, you will need to set the width of the marquee explicitly. If neither marquee nor td width is specified, the scrolling marquee will be limited to 1 pixel wide.

To create vertically scrolling subtitles, set its scrollLeft property to 0. To create a horizontally scrolling subtitle, set its scrollTop property to 0, which overrides any script settings.

scrollLeft and scrollTop properties are read-only when the subtitles are scrolling. When not in the scrolling state, scrollLeft is readable and writable for subtitles set to horizontal scrolling, and scrolltop is readable and writable for subtitles set to vertical scrolling.

This element is available in HTML in Microsoft® Internet Explorer 3.0 and in script in Internet Explorer 4.0.

This element is a block element.

This element requires a closing tag.

【Editor’s Recommendation】

How to add underline in HTML? Usage example of adding underline to html88f336217b3880082bb52d49b5de60a5 tag

How to set the style of html button tag? Introduction to the style of html button tag

The above is the detailed content of What is the code for scroll bar in html? How to set html scroll bar?. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Related articles

See more