文章目录
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/ 合并行列 )(第四天)