Code example of using css to hide scroll bars-CSS Tutorial-php.cn

Code example of using css to hide scroll bars

黄舟

Release： 2017-10-25 09:53:33

Original

2022 people have browsed it

The overflow attribute specifies what happens when the content overflows the element box

①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 will display scroll bars to view the remaining content.
⑤inherit specifies that the value of the overflow attribute should be inherited from the parent element.

Example 1: table is used as a container and [hide] the scroll bar

Note: {①The display of the table is set to block, otherwise the scroll bar will not appear}

You must first The table is placed in a p, and the length and width of p must be fixed

If you only want scrolling in the vertical direction, you can set the outer p attribute overflow-x: hidden;

Example:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>滚动条</title>
    <style type="text/css">
        *{margin: 0;padding: 0}
        .area{width: 300px;height: 600px;background-color: #BFEFFF;
            overflow-x: hidden;position: relative}
        .area table{display: block;width: 320px;height: 600px;
            background-color: #00D685;overflow-y: auto;}
        .area table tr td{height: 200px;width: 300px}
    </style>
</head>
<body>
<p class="area">
    <table>
        <tr><td>1</td></tr>
        <tr><td>2</td></tr>
        <tr><td>3</td></tr>
        <tr><td>4</td></tr>
        <tr><td>5</td></tr>
        <tr><td>6</td></tr>
    </table>
</p>
</body>
</html>

Copy after login

Pay attention to modifying the table attributes here

Example 2:

ul as a container, hiding the scroll bar

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>滚动条</title>
    <style type="text/css">
        *{margin: 0;padding: 0}
        .area{width: 300px;height: 600px;background-color: #BFEFFF;
            overflow-x: hidden;
        position: relative}
        .area ul{height: 100%;width: 320px;background-color: #00D685;list-style: none;
        overflow-x: hidden;overflow-y: auto}
        .area ul li{height: 200px;width: 100%;background-color: #cccccc}
    </style>
</head>
<body>
<p class="area">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>
</p>
</body>
</html>

Copy after login

Principle: Nest another layer of overflow outside the container: hidden The inner content will be hidden in disguise by limiting the size to the same as the outer nested layer.

The above is the detailed content of Code example of using css to hide scroll bars. For more information, please follow other related articles on the PHP Chinese website!