div实现可以滚动但不显示滚动条（纯CSS实现）

比眉伴天荒 2023-01-19 03:06 624阅读 0赞

div实现可以滚动但不显示滚动条（纯CSS实现）

  • 想要的效果
  • 实现效果的核心代码
  • 参考

想要的效果

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

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

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

实现效果的核心代码

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

  1. <div style="width: 200px;height: 200px; position: relative;overflow: hidden;">
  2.     <div id="abc" style="overflow-x: hidden;overflow-y: scroll;position: absolute;">
  3.         <div style="width: 200px;height: 200px;">
  4.             <br>
  5.         </div>
  6.     </div>
  7.  </div>

参考

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

发表评论

表情：
评论列表 （有 0 条评论，624人围观）

还没有评论，来说两句吧...

相关阅读