Home > Article > Web Front-end > Code example of using css to hide scroll bars

Code example of using css to hide scroll bars

黄舟Original: 2017-10-25 09:53:331978browse

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>

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>

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!

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：Example analysis of flex-shrink, a CSS flexible box model attribute (picture)Next article：Example analysis of flex-shrink, a CSS flexible box model attribute (picture)

See more

Code example of using css to hide scroll bars

Related articles