产生垂直滚动条和修改滚动条的样式兼容谷歌和火狐

简介: 我们为什么会处理浏览器滚动条的样式了?因为浏览器的滚动条,会影响页面的宽哈;当页面的宽度发生变化时,那么页面的内容排版就会发生变化!所以我们必须处理浏览器

讲解


hidden-ovflow-box 是产生滚动条的区域


.hidden-ovflow-box{
    height: calc(100% - 179px);
    overflow: hidden;
    overflow-y: auto;
}


产生滚动条的三个必要因素


/*控制滚动条里面滑块的高度*/
.hidden-ovflow-box::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 5px;
  background: #cccccc;
  height: 200px; /*控制滚动条里面滑块的高度*/【重要】
}


注意点==》如果你没有产生滚动条,你就给滚动动条区域设置一个固定的高度。


比如说固定高度是1000px;如果产生了滚动条。


说明是 height: calc(100% - 179px);这一句出了问题。


今天我就遇见了。此时你去逐级去检查 hidden-ovflow-box的父级元素是否设置了高度100%


还有一个点

height: calc(100% - 179px);这个动态计算的高度一定要准确。


否者 这个跟这个同级的下一个元素会出问题。


问题是:滚动条区域里面的元素等级比滚动条区域外的元素高。


html


<div class="hidden-ovflow-box">
                    <div
                        :class="{infolistmoduleactive:currentIndex==index}"
                        class="info-list-module"
                        @click="handlerCurrentPerson(index,item)"
                        v-for="(item,index) in leftListData"
                        :key="index"
                    >   
                    </div>
 </div>


css


.hidden-ovflow-box{
    height: calc(100% - 179px);
    overflow-y: auto;
   /* 兼容火狐浏览器 */
   /* 滑块颜色 滑块的背景颜色 */
   scrollbar-color: #e5e5e5 #f7f7f9;
   /* 火狐浏览器滚动条宽度有三种 thin auto none*/
   /* thin 很细 */
   /* auto 默认 */
   /* none 将滚动条隐藏 */
   scrollbar-width: thin;
}
/* 滚动条样式开始 */
.hidden-ovflow-box::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 10px; /*修改滚动条的宽度*/
  /*高宽分别对应横竖滚动条的尺寸*/
  height: 4px;
}
.hidden-ovflow-box::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 5px;
  background: #cccccc;
  height: 200px; /*控制滚动条里面滑块的高度*/
}
.hidden-ovflow-box::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  border-radius: 0;
  background: #e5e7ef;
}


1425695-20191229205610589-1725316186.png1425695-20210124225956569-1811068777.png



相关文章
|
JSON 小程序 JavaScript
微信小程序之项目基本结构、页面的基础及宿主环境
微信小程序之项目基本结构、页面的基础及宿主环境
647 1
|
异构计算
Magisk模块:停用HW叠加层
Magisk模块:停用HW叠加层
6574 0
Magisk模块:停用HW叠加层
|
Windows
Electron窗口白屏解决
Electron白屏问题主要出现在两方面: 1、electron未加载完毕html,electron自身产生的白色背景; 2、electron加载html,html处于加载渲染过程中产生的短暂白屏;
3173 0
|
存储 算法
算法系列之搜索算法-广度优先搜索BFS
广度优先搜索(BFS)是一种非常强大的算法,特别适用于解决最短路径、层次遍历和连通性问题。在面试中,掌握BFS的基本实现和应用场景,能够帮助你高效解决许多与图或树相关的问题。
1265 1
算法系列之搜索算法-广度优先搜索BFS
|
消息中间件 SQL 监控
ETL的灵魂:调度系统
ETL的灵魂:调度系统
3177 1
|
前端开发 容器
如何利用CSS实现三角形、扇形、聊天气泡框
如何利用CSS实现三角形、扇形、聊天气泡框
727 0
|
机器学习/深度学习 人工智能 自然语言处理
【机器学习】python之人工智能应用篇--游戏生成技术
游戏生成技术,特别是生成式人工智能(Generative Artificial Intelligence, 简称Generative AI),正逐步革新游戏开发的多个层面,从内容创作到体验设计。这些技术主要利用机器学习、深度学习以及程序化内容生成(Procedural Content Generation, PCG)来自动创造游戏内的各种元素,显著提高了开发效率、丰富了游戏内容并增强了玩家体验。以下是生成式AI在游戏开发中的几个关键应用场景概述
815 2
|
缓存 网络协议
Clash连接成功却无法访问
Clash连接成功却无法访问
7962 1
|
JavaScript
如何在Vue页面中引入img下的图片作为背景图。../的使用
这篇文章介绍了在Vue页面中如何引入`img`目录下的图片作为背景图,提供了两种使用相对路径的方法。第一种是使用`../assets/img/`作为路径引入图片,第二种是使用`../../assets/img/`作为路径。文章还展示了使用这些方法的代码实现和效果展示,并鼓励读者学无止境。
如何在Vue页面中引入img下的图片作为背景图。../的使用