How to use DIV scroll bar-HTML Tutorial-php.cn

The scroll bar of DIV can be used in many places. Today I will teach you how to use CSS to operate the scroll bar of DIV. How to hide and display the DIV scroll bar

First of all, basic knowledge of CSS

##overflow-y:scroll; Always display the vertical scroll bar

overflow- y:visible: Do not cut the content or add vertical scroll bars

Understand: overflow-y manual http://www.divcss5.com/shouce/c_overflowy.shtml

overflow-x:scroll; Always display horizontal scroll bars

overflow-x:visible: Do not cut content or add horizontal scroll bars

Learn more: overflow-x manual http: //www.divcss5.com/shouce/c_overflowx.shtml

Understanding css overflow

##div setting scroll bar example

DIVCSS5 passed Set the div width, div height, and div border style for the first DIV object, and add demonstration text content in the DIV box. Set the same CSS style and box text content for the second box, and set horizontal and vertical scroll bars. Observe the effect.

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

1. The specific and complete html source code is as follows:

    div滚动条 在线演示 www.divcss5.com  
  测试内容测试内容测试内容测试内容测试内容测试内容测试内容 测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容 测试内容测试内容测试内容测试内容测试内容
 测试内容测试内容测试内容测试内容测试内容测试内容测试内容 测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容 测试内容测试内容测试内容测试内容测试内容

Copy after login

In order to observe the effect, we set the same CSS style and the same text content for both DIV boxes. Set the DIV box, the second box has a scroll bar style set, so there is no overflow. The vertical right side (Y) has a pull-down and pull-up scroll bar style, and the horizontal bottom (X) has a scroll bar effect but cannot be pulled left or right. This is Because the text content cannot expand the width of the DIV, if it is a picture larger than the set width of the DIV, a scroll bar effect will appear on the horizontal bottom (X).

The above is how to hide and display the DIV scroll bar. Interested friends can do it themselves.Related reading:

The above is the detailed content of How to use DIV scroll bar. For more information, please follow other related articles on the PHP Chinese website!