How to add scroll bar in css-CSS Tutorial-php.cn

How to add scroll bar in css

王林

Release： 2023-01-07 11:43:03

Original

5667 people have browsed it

The way to add a scroll bar in css is to add the overflow attribute to the div and set the attribute value to scroll, such as [overflow: scroll;]. The overflow attribute specifies what happens when the content overflows.

How to add scroll bar in css

The operating environment of this article: windows10 system, css 3, thinkpad t480 computer.

To add a scroll bar is actually very simple. There is an attribute overflow, which specifies what will happen if the content overflows the box of an element.

Let’s take a look at the attribute values:

visible Default value. The content will not be trimmed and will be rendered outside the element box.

hidden The content will be trimmed and the remaining content will be invisible.

scroll The content will be trimmed, but the browser will display scroll bars to view the remaining content.

auto If the content is trimmed, the browser displays scroll bars to view the remaining content.

inherit specifies that the value of the overflow attribute should be inherited from the parent element.

Example:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
div.ex1 {
    background-color: lightblue;
    width: 110px;
    height: 110px;
    overflow: scroll;
}

div.ex2 {
    background-color: lightblue;
    width: 110px;
    height: 110px;
    overflow: hidden;
}

div.ex3 {
    background-color: lightblue;
    width: 110px;
    height: 110px;
    overflow: auto;
}

div.ex4 {
    background-color: lightblue;
    width: 110px;
    height: 110px;
    overflow: visible;
}
</style>
</head>
<body>
<h1>overflow 属性</h1>

<p>如果元素中的内容超出了给定的宽度和高度属性，overflow 属性可以确定是否显示滚动条等行为。</p>

<h2>overflow: scroll:</h2>
<div class="ex1">php中文网，梦开始的地方！php中文网，梦开始的地方！php中文网，梦开始的地方！php中文网，梦开始的地方！</div>

<h2>overflow: hidden:</h2>
<div class="ex2">php中文网，梦开始的地方！php中文网，梦开始的地方！php中文网，梦开始的地方！php中文网，梦开始的地方！</div>

<h2>overflow: auto:</h2>
<div class="ex3">php中文网，梦开始的地方！php中文网，梦开始的地方！php中文网，梦开始的地方！php中文网，梦开始的地方！</div>

<h2>overflow: visible (默认):</h2>
<div class="ex4">php中文网，梦开始的地方！php中文网，梦开始的地方！php中文网，梦开始的地方！php中文网，梦开始的地方！</div>

</body>
</html>

Copy after login

You can copy the above code locally and run it locally to see the effect.

Related video tutorial sharing: css video tutorial

The above is the detailed content of How to add scroll bar in css. For more information, please follow other related articles on the PHP Chinese website!