Home > Article > Web Front-end > How to use DIV scroll bar
How to use DIV scroll bar
- php中世界最好的语言Original
- 2017-11-20 15:55:401935browse
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 barsUnderstand: overflow-y manual http://www.divcss5.com/shouce/c_overflowy.shtmloverflow-x:scroll; Always display horizontal scroll bars
overflow-x:visible: Do not cut content or add horizontal scroll barsLearn more: overflow-x manual http: //www.divcss5.com/shouce/c_overflowx.shtmlUnderstanding 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:
<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312" />
<title>div滚动条 在线演示 www.divcss5.com</title>
<style>
.divcss5-a,.divcss5-b{ width:150px; height:100px; float:left; border:1px solid #F00}
.divcss5-b{ margin-left:10px;overflow-y:scroll; overflow-x:scroll;}
/* css注释说明：设置第二个盒子与第一个盒子间距为10px，并设置了横纵滚动条样式 */
</style>
</head>
<body>
<div class="divcss5-a">测试内容测试内容测试内容测试内容测试内容测试内容测试内容
测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容
测试内容测试内容测试内容测试内容测试内容</div>
测试内容测试内容测试内容测试内容测试内容测试内容测试内容
测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容
测试内容测试内容测试内容测试内容测试内容</div>
</body>
</html>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).
So how to hide CSS div scrollbar?
DIV does not have scroll bars by default. If a scroll bar style is added, the scroll bar will naturally disappear after being removed. If it is a scroll bar that appears inframe
iframe, if you want to hide the scroll bar horizontally in The CSS style overflow-y:visible or overflow-y:hidden can hide the scroll bar.
The above is how to hide and display the DIV scroll bar. Interested friends can do it themselves. Related reading:
How to learn DIV+CSS and the learning route
html and DIV+CSS naming convention summary sharing (collection)
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!