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

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

想要的效果


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

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

1.png20210507101657423.png


实现效果的核心代码


首先有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>

参考


参考链接:https://www.cnblogs.com/dinghaoran/p/11322455.html

相关文章
N..
|
1月前
|
前端开发 容器
DIV+CSS网页布局
DIV+CSS网页布局
N..
8 0
|
2月前
|
移动开发 前端开发 JavaScript
H5+CSS3+JS逆向前置——5、DIV+CSS百分比布局
H5+CSS3+JS逆向前置——5、DIV+CSS百分比布局
38 0
|
2月前
|
移动开发 前端开发 JavaScript
H5+CSS3+JS逆向前置——4、DIV+CSS绘制旗帜练习
H5+CSS3+JS逆向前置——4、DIV+CSS绘制旗帜练习
21 0
|
2月前
|
人工智能 前端开发 开发者
Baidu千帆大模型赋能——CSS控制DIV垂直水平居中——送给大一的孩子们,学会用AI思维来帮助你解决问题
Baidu千帆大模型赋能——CSS控制DIV垂直水平居中——送给大一的孩子们,学会用AI思维来帮助你解决问题
26 1
|
2月前
|
前端开发 JavaScript API
|
4月前
|
前端开发
css 实现 div 宽高同比
css 实现 div 宽高同比
|
4月前
|
前端开发
CSS div 水平排列
CSS div 水平排列
|
4月前
|
前端开发
CSS 隐藏滚动条
CSS 隐藏滚动条
|
4月前
|
前端开发
纯css实现滚动(滑动)区域
项目需求: 实现天气24小时预报,类似于华为等天气app,有个可以滑动的区域 完成效果
38 0
|
5月前
|
JSON 前端开发 数据格式
CSS横向滚动条自定义样式
CSS横向滚动条自定义样式
48 0