Home > Article > Web Front-end > How to use DIV scroll bar

How to use DIV scroll bar

php中世界最好的语言Original: 2017-11-20 15:55:401950browse

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:

<!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 in

frame

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:

Some details that should be paid attention to in the layout of div+css

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!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Naming rules in HTMLNext article：Naming rules in HTML

See more

How to use DIV scroll bar

Related articles