div实现可以滚动但不显示滚动条(纯CSS实现)

222 阅读1分钟

div实现可以滚动但不显示滚动条(纯CSS实现)

想要的效果

想实现滚动效果但是又不想显示滚动条,如下面两个图所示:

从下面两个图可以看出,实现了滚动效果,动图弄着有点费劲,就委屈各位通过两个图片的变化看效果吧

在这里插入图片描述
在这里插入图片描述

实现效果的核心代码

首先有3个div
第1个,固定大小是宽:200,高:200(单位为px,下同)
第2个,不固定大小,其大小要用第3个div把个撑开,但是这个div必需要有滚动条
第3个,固定大小与第1个div保持一致宽:200,高:200

<div style="width: 200px;height: 200px; position: relative;overflow: hidden;">
    <div id="abc" style="overflow-x: hidden;overflow-y: scroll;position: absolute;">
        <div style="width: 200px;height: 200px;">
    		<br>
        </div>
    </div>
 </div>

参考

参考链接:www.cnblogs.com/dinghaoran/…