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?

寻∝梦
Release: 2018-09-04 11:30:54
Original
13691 people have browsed it

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.

label, which is a label that appears in pairs , the content between the first tag and the last tag is the scrolling content. The attributes of the 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 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>
Copy after login

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 http://www.php.cn/ 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>
Copy after login

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>
Copy after login

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>
Copy after login

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>
Copy after login

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 and 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 html 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!

Related labels:
source:php.cn
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template