In the actual operation process, we know that many DIVs are not enough to display all the content, so the scroll bar must be set. Today I will teach you how to set the scroll bar of DIV.
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. I will introduce it to you next.
1. Basic understanding of CSS - TOP
##overflow-y:scroll; Always display the vertical scroll bar
overflow-y: visible: does not cut the content or add a vertical scroll bar
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
Understand css overflow
2. div setting scroll bar example
DIVCSS5 by setting the first DIV The object sets the div width, div height, and div border style, and adds demonstration text content in the DIV box. The second box sets the same CSS style, the same text content in the box, and sets horizontal and vertical scroll bars to 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 class="divcss5-b">哈哈哈哈啊哈哈哈哈哈哈啊哈哈哈哈哈哈啊哈哈哈哈哈哈啊哈哈哈
哈哈哈哈啊哈哈哈哈哈哈啊哈哈哈哈哈哈啊哈哈哈哈哈哈啊哈哈哈哈哈哈啊哈哈哈哈哈哈啊哈哈哈哈
哈哈哈哈啊哈哈哈哈哈哈啊哈哈哈哈哈哈啊</div>
</body>
</html>
Copy after login
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 ".divcss5-b".
The first box ".divcss5-a" has too much content and overflows the DIV box, and the second The box has a scroll bar style set, so there is no overflow. A pull-down scroll bar style appears on the right side (Y) of the vertical direction. Horizontally
How to hide CSS div scroll bars
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 in an iframe, if you want to hide the scroll bar horizontally in visible or overflow-y:hidden can hide the scroll bar.
Related reading:
css ripple animation
How to insert spaces in HTML Method
Add or remove HTML dom element
The above is the detailed content of How to set scroll bar in DIV. For more information, please follow other related articles on the PHP Chinese website!