隐藏滚动条且分析其中的坑

最新推荐文章于 2024-08-12 22:06:26 发布

javascriptFaker

最新推荐文章于 2024-08-12 22:06:26 发布

阅读量174

点赞数

分类专栏： Css 文章标签： css

本文链接：https://blog.csdn.net/makerbeen/article/details/109190033

版权

Css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

通过自己的学习掌握隐藏滚动条的方式只有一种，即给滚动元素增加padding那么滚动条会以含padding的区域滚动，那么再在外层嵌套一层元素使用overflow:hidden;即可以隐藏滚动条内容。

但是有一个问题，滚动的时候需要处理padding突出一块的问题，即需要在内层元素添加一个padding-right使得希望见到的元素块可以都展示出来。

老规矩上代码：

<!DOCTYPE html>
<html>
  <head>
    <style>
      .hidden {
        width: 100px;
        height: 100px;
        overflow: hidden;
      }

      .box {
        position: relative;
        padding: 100px;
        width: 100px;
        height: 100px;
        background: gray;
        box-sizing: content-box;
        overflow: scroll;
        left: -100px;
        top: -100px;
      }
      .child {
        width: 200px;
        height: 100px;
        padding-right: 100px;
        background-color: aqua;
        margin-right: 100px;
      }
      .child1 {
        width: 100%;
        height: 100%;
        background: blue;
      }
    </style>
    <meta charset="utf-8" />
  </head>
  <body>
    <div class="hidden">
      <div class="box">
        <div class="child">
          <div class="child1">你看我在动，我在动，我在动，我在动</div>
        </div>
      </div>
    </div>
  </body>
</html>

javascriptFaker

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
隐藏滚动条且分析其中的坑

通过自己的学习掌握隐藏滚动条的方式只有一种，即给滚动元素增加padding那么滚动条会以含padding的区域滚动，那么再在外层嵌套一层元素使用overflow:hidden;即可以隐藏滚动条内容。但是有一个问题，滚动的时候需要处理padding突出一块的问题，即需要在内层元素添加一个padding-right使得希望见到的元素块可以都展示出来。老规矩上代码：<!DOCTYPE html><html> <head> <style>
复制链接

扫一扫

专栏目录