滚动条问题

PBitW

已于 2023-11-17 14:47:21 修改

阅读量343

点赞数

分类专栏：项目总结文章标签： css 取消滚动条最详细 css3 滚动条出现后消失滚动条设置

于 2021-04-13 18:20:25 首次发布

本文链接：https://blog.csdn.net/langwang_100/article/details/115605167

版权

项目总结专栏收录该内容

18 篇文章 1 订阅

订阅专栏

本文介绍了如何解决滚动条出现后消失的问题，提供了解决方案，包括自定义滚动条样式以保持可见，以及使用CSS属性`overflow: hidden`和`scrollbar-width:none`来隐藏滚动条。同时，还探讨了通过设置`padding`来实现隐藏滚动条的效果，并提醒了关于`box-sizing`属性的注意事项。

摘要由CSDN通过智能技术生成

1、滚动条出现后消失

（2023/11/17 号补充）
今天菜鸟又遇见滚动条问题，没有百度，而是来看我的博客了，直接搜索，却发现并没有说怎么解决 滚动条出现后消失 的问题，所以在找到解决问题的办法后，特来更新！

首先这个滚动条出现后消失的问题好像是 element plus 或者是 px2rem 引入导致的，如果你就是普通的项目应该是没有这个问题，而且竖向滚动条消失了也没啥关系，可以用鼠标滚动，主要是横向的消失了就有些内容没法看了！

解决办法就是自己设置滚动条样式：

/* 解决浏览器滚动条出现后消失的问题 */
/* 1,滚动条 */
::-webkit-scrollbar {
  width: 4px; /* 纵向滚动条 宽度 */
  height: 4px; /* 横向滚动条 高度 */
  background-color: #f1f1f1; /* 整个滚动条颜色*/
}
/* 2,滚块 */
::-webkit-scrollbar-thumb {
  background-color: #c1c1c1; /* 滚动块颜色*/
  border-radius: 2px;
}
/* 3,外层轨道 */
::-webkit-scrollbar-track {
  background-color: transparent;
}

更多滚动条设置可以看该篇博客，非常详细，我就不进行二次创作了😀
css 横向、纵向滚动条

2、取消滚动条

（2023/11/17 号补充）
现在基本上就是通过自定义滚动条，直接取消滚动条了或者改成自己想要的样式！

当内容中用到overflow-scroll，就会产生丑恶的滚动条，为了除掉这个滚动条，程序员要写的代码还真的不少，不同浏览器兼容不一样，代码也不一样！

这里菜鸟是引用的该篇博客：
在这里插入图片描述
感谢：从入门到入土777的去除overflow-scroll滚动条

第一种

这里直接上代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    html{
      -ms-overflow-style: none;
      /* scrollbar-width: none; */
    }
    .max-box{
      width: 500px;
      height: 400px;
      overflow: scroll;
      scrollbar-width: none;
    }
    .max-box::-webkit-scrollbar{
      display: none;
    }

    .box{
      width: 400px;
      height: 600px;
      background-color: aqua;
    }
  </style>
</head>
<body>
    <div class="max-box">
      <h2>阿富汗卡号放大倍数方面回去分解看病难没办法马拉松部分哦哈办法弥补方面开发部分漫步覅</h2>
      <div class="box"></div>
    </div>
</body>
</html>

不过菜鸟没有IE浏览器，所以不知道最后一个是否可行，希望有IE的读者可以尝试并留下结果在品论区！

overflow：hidden 解决

菜鸟还看见了一种解决方案，但是事实证明并无效果：
在这里插入图片描述

2023/03/31，今天菜鸟回来读了一读，发现这里有问题，其实是可以的，需要给aa加入高宽，且小于max-box！

代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .aa{
      overflow: hidden;
      display: inline-block;
    }
    .max-box{
      width: 500px;
      height: 400px;
      overflow: scroll;
    }
    .box{
      width: 400px;
      height: 600px;
      background-color: aqua;
    }
  </style>
</head>
<body>
  <div class="aa">
    <div class="max-box">
      <h2>阿富汗卡号放大倍数方面·回去分解看病难没办法马拉松部分哦哈办法弥补方面开发部分漫步覅</h2>
      <div class="box"></div>
    </div>
  </div>
</body>
</html>

运行结果：
在这里插入图片描述

padding解决

还有一种通过设置padding的方式来解决，这篇博客也没说清楚，如下：

在这里插入图片描述
菜鸟自己实现的代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .aa{
      width: 500px;
      height: 400px;
      overflow: hidden;
    }
    .max-box{
      /* box-sizing: border-box; */
      width: 100%;
      height: 100%;
      overflow: scroll;
      padding-bottom: 15px;
      padding-right: 15px;
    }
    .box{
      width: 400px;
      height: 600px;
      background-color: aqua;
    }
  </style>
</head>
<body>
  <div class="aa">
    <div class="max-box">
      <h2>阿富汗卡号放大倍数方面·回去分解看病难没办法马拉松部分哦哈办法弥补方面开发部分漫步覅</h2>
      <div class="box"></div>
    </div>
  </div>
</body>
</html>

注意：

这里千万不要给滚动的元素加上 box-sizing: border-box; 这样会让其padding往内层挤，而不是往外层，而导致无用，所以就算 box-sizing: border-box; 很好，但是也不能用！

不知道 box-sizing: border-box; 的读者可以移步
重学前端样式(text-align)/ 详解表格table（重点：继承/ border-spacing/collapse/ empty-cells/ box-sizing/ 合并行列）（第四天）

PBitW

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
滚动条问题

1、滚动条出现后消失2、取消滚动条第一种overflow：hidden 解决2023/03/31，今天菜鸟回来读了一读，发现这里有问题，**其实是可以的，需要给aa加入高宽，且小于max-box！**padding解决
复制链接

扫一扫