Home >Web Front-end >CSS Tutorial >html scroll bar style setting
html scroll bar style setting
- php中世界最好的语言Original
- 2017-11-22 13:33:374248browse
If you need to set a scroll bar for DIV, then you may need to set the style of the scroll bar, horizontally or vertically. You need to use overflow-y and overflow-x to set it today. Let me tell you about these two attributes.
Set the scroll bar for the div and set its horizontal scroll bar and vertical scroll bar styles. The required CSS styles are overflow-y and overflow-x to set the right and bottom scroll bar effects of the div box object. At the same time, you can also use CSS styles to hide the scroll bar of the html frame iframe.
overflow-y:scroll; Always display the vertical scroll bar
overflow-y:visible: Do not cut the content Do not add vertical scroll bar
Instance of div setting scroll bar
By setting the div width, div height, div border style for the first DIV object, and adding demonstration text content in the DIV box, Set the same CSS style for the second box, the same text content, and set 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 "div-b".
1. The specific and complete html source code is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312" />
<title>div滚动条 在线演示 </title>
<style>
.div-a,.div-b{ width:150px; height:100px; float:left; border:1px solid #F00}
.div-b{ margin-left:10px;overflow-y:scroll; overflow-x:scroll;}
/* css注释说明：设置第二个盒子与第一个盒子间距为10px，并设置了横纵滚动条样式 */
</style>
</head>
<body>
<div class="div-a">测试内容测试内容测试内容测试内容测试内容测试内容测试内容
测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容
测试内容测试内容测试内容测试内容测试内容</div>
<div class="div-b">测试内容测试内容测试内容测试内容测试内容测试内容测试内容
测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容
测试内容测试内容测试内容测试内容测试内容</div>
</body>
</html>In order to observe the effect, we set the same CSS style and the same text content for both DIV boxes. X and y (horizontal and vertical scroll bar styles) are set for ".div-b".
Explanation: The first box ".div-a" has too much content and overflows the DIV box. The two boxes have scroll bar styles set up, so there is no overflow. The vertical right side (Y) has a scroll bar style that can be pulled down and up. The horizontal bottom (X) has a scroll bar effect but cannot be pulled left or right. This is because the text content cannot be stretched. Open the DIV width. If it is a picture greater than the DIV setting width, a scroll bar effect will appear at the horizontal bottom (X).
Related recommendations:
The above is the detailed content of html scroll bar style setting. For more information, please follow other related articles on the PHP Chinese website!