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

举报
牛哄哄的柯南 发表于 2021/05/26 14:11:39 2021/05/26
【摘要】 div实现可以滚动但不显示滚动条(纯CSS实现) 想要的效果实现效果的核心代码参考 想要的效果 想实现滚动效果但是又不想显示滚动条,如下面两个图所示: 从下面两个图可以看出,实现了滚动效果,动图弄着有点费劲,就委屈各位通过两个图片的变化看效果吧 实现效果的核心代码 首先有3个div 第1个,固定大小是宽:200,高:200(单...

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>

  
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

参考

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

文章来源: keafmd.blog.csdn.net,作者:牛哄哄的柯南,版权归原作者所有,如需转载,请联系作者。

原文链接:keafmd.blog.csdn.net/article/details/116483202

【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。