css set scroll

CSS is an important part of web development. It controls the setting of page styles, and the scrolling effect is also an integral part of CSS skills. In this article, we will talk about how to set scrolling in CSS to make the web page display more rich and dynamic.

1. What is scrolling

The scrolling effect means that in a certain area of ​​the page, when the content exceeds the visible range of the area, the page will automatically generate vertical or horizontal scroll bars. to view content beyond the visible range.

Normally, the vertical scroll bar appears on the right side of the page, and the horizontal scroll bar appears on the bottom of the page. Moreover, the scroll bars do not always appear and do not appear when the content does not exceed the visible area.

2. How to set scrolling

CSS provides scroll bar-related setting properties. We can set the style and operation of the scroll bar. The following are some of the more common scroll bar setting properties in CSS.

1. overflow

The overflow attribute controls the behavior of an element when its content exceeds the visible range of the parent element. Its attribute values ​​are:

(1) visible: The "overflow" part will be rendered outside the element box.

(2) hidden: Hide "overflow" content.

(3) scroll: "Overflow" content displays scroll bars.

(4)auto: Automatically determine whether scroll bars need to be displayed.

Sample code:

div{
    width: 200px;
    height: 100px;
    border: 1px solid red;
    overflow: scroll;
}
p{
    width: 400px;
    height: 200px;
    background-color: blue;
}

In the above code, set the height of the DIV element to 100px and the width to 200px, and then set the height of the P element to 200px and the width to 400px. At this time, because the size of the P element exceeds the visible range of the DIV element, a scroll bar will appear in the overflow part.

2. scrollbar-width

This attribute can control the width of the scroll bar. Its value can be set to thin: thin, auto: automatic (will be based on the browser's Changes according to settings) or none: no scroll bars are displayed.

Sample code:

div{
    width: 200px;
    height: 100px;
    border: 1px solid red;
    overflow: scroll;
    scrollbar-width: thin;
}
p{
    width: 400px;
    height: 200px;
    background-color: blue;
}

In the above code, the width of the scroll bar is set to thin. At this time, the scroll bar presents a thin style.

3. scrollbar-color

This property is used to control the color of the scroll bar slider and rail. The available values ​​are auto or custom color values. The custom color value is written as two color values, separated by a space to represent a one-way color, and separated by a comma to represent a two-way color.

Sample code:

div{
    width: 200px;
    height: 100px;
    border: 1px solid red;
    overflow: scroll;
    scrollbar-width: thin;
    scrollbar-color: blue transparent;
}
p{
    width: 400px;
    height: 200px;
    background-color: blue;
}

In the above code, set the color of the scroll bar slider to blue and the color of the slide rail to transparent.

Summary

This article teaches several methods of setting scroll bars in CSS. In addition to these commonly used attributes, there are many other setting methods, and they also have their own characteristics and Application scenarios. I hope it can help readers understand the relevant knowledge and practical methods of scrolling effects, enhance their CSS skills, and discover and practice new possibilities.

The above is the detailed content of css set scroll. For more information, please follow other related articles on the PHP Chinese website!