Home >Web Front-end >HTML Tutorial >How to set scroll bar in DIV

How to set scroll bar in DIV

php中世界最好的语言Original: 2017-11-20 12:24:537632browse

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>

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.

How to set scroll bar in DIV

Related articles