Shulou(Shulou.com)06/01 Report--

In this article Xiaobian for you to introduce in detail "CSS scroll bar display and scroll bar hiding method", the content is detailed, the steps are clear, the details are handled properly, I hope this "CSS scroll bar display and scroll bar hidden method" article can help you solve your doubts, the following follow the editor's ideas slowly in-depth, together to learn new knowledge.

I. basic understanding of CSS

Overflow-y:scroll; always displays a vertical scroll bar

Overflow-y:visible: do not cut content or add vertical scroll bars

Overflow-x:scroll; always displays a horizontal scroll bar

Overflow-x:visible: do not cut content or add horizontal scroll bars

2. Div sets scrollbar example

DIVCSS5 sets the div width, div height, div border style for the first DIV object, and adds presentation text content to the DIV box, the second box sets the same CSS style, the box text content is the same, and sets horizontal and vertical scroll bars to observe the effect.

The first box CSS is named "divcs5-a" and the second DIV box style selector is named "- b".

1. The complete html source code is as follows:

Div scroll bar online demo www..com

.-width:150px; height:100px; float:left; border:1px solid. Musb {width:150px; height:100px; float:left; border:1px solid # F00}

.-b {margin-left:10px;overflow-y:scroll; overflow-x:scroll;}

/ * css Note: set the distance between the second box and the first box to 10px, and set the horizontal and vertical scroll bar style * /

DIVCSS5 test content, welcome to DIVCSS5 to learn DIV+CSS technology. Everyone can communicate.

All the free CSS tutorials on the DIVCSS5 master site are enough to learn DIVCSS technology-if you need to learn deeply and systematically, achieve it in a short time.

The ideal learning effect can be studied in DIV+CSS training course.

DIVCSS5 test content, welcome to DIVCSS5 to learn DIV+CSS technology. Everyone can communicate.

All the free CSS tutorials on the DIVCSS5 master site are enough to learn DIVCSS technology-if you need to learn deeply and systematically, achieve it in a short time.

The ideal learning effect can be studied in DIV+CSS training course.

To see the effect, we set the same basic CSS style and the same text content for both DIV boxes. X and y (horizontal and vertical scroll bar styles are set for ".-b". )

2. Take a screenshot of the effect of the DIV+CSS scroll bar.

Screenshot of CSS DIV scroll bar style example effect

Description: the first box ".-a" has too much content and overflows the DIV box, the second box has set the scroll bar style, so there is no overflow, the vertical right side (Y) has a pull-down scroll bar style, and the horizontal bottom (X) has a scroll bar effect but can not be pulled around, this is because the text content can not support the DIV width. If it is a picture larger than the width set by DIV, then the horizontal bottom (X) will have a scroll bar effect.

Read this, the "CSS scroll bar display and scroll bar hidden methods" article has been introduced, want to master the knowledge of this article also need to practice and use to understand, if you want to know more about the article, welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.