css-隐藏网页页面右侧滚动条

逻辑:三个DIV,大“div” 设置一个高度、超出高度内容隐藏,小“div”设置一个高度可以和大“div”高度一样,中“div”设置超出大“div”内容xian显示滑动条,并且添加 “隐藏滚轮”样式;

原理:就是小盒子和大盒子高度都写固定了,但是小盒子内容很多超过大盒子,但是大盒子 overflow:hidden 隐藏了,只要给中盒子添加 超出部分显示滚动条就好了,然后中盒子使用 “隐藏滚轮”样式  》》  中盒子ID或class::-webkit-scrollbar{display:none}

代码图片:

源代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>去掉滚动条</title>
    <style>
        p{
            line-height: 20px;
            font-size: 24px;
            color: green;
        }
        #o1{height: 300px;width: 100%;background-color:red;}
        #o3{
            height: 400px;background-color: yellow;
        }
        #o1{overflow: hidden}
        #o2{overflow-y: scroll;}
        #o2::-webkit-scrollbar {display: none;}
    </style>
</head>
<body>
<div id="o1">
    <div id="o2">
        <div id="o3">
            <p>sdassd</p><p>sdassd</p><p>sdassd</p><p>sdassd</p><p>sdassd</p><p>sdassd</p><p>sdassd</p><p>sdassd</p><p>sdassd</p><p>sdassd</p><p>sdassd</p><p>sdassd</p><p>sdassd</p><p>sdassd</p><p>sdassd</p><p>sdassd</p><p>sdassd</p><p>sdassd</p><p>sdassd</p><p>sdassd</p><p>sdassd</p>
        </div>
    </div>
</div>
</body>
<html>

猜你喜欢

转载自blog.csdn.net/qq_36979290/article/details/82142859