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

发布时间:2022-01-14 发布网站:https://www.cnblogs.com/IwishIcould
前端之家收集整理的这篇文章主要介绍了产生垂直滚动条和修改滚动条的样式兼容谷歌和火狐前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

我们为什么会处理浏览器滚动条的样式了?
因为浏览器的滚动条,会影响页面的宽哈;
当页面的宽度发生变化时,那么页面的内容排版就会发生变化!
所以我们必须处理浏览器
讲解
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;
}

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

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

总结


以上是前端之家为你收集整理的产生垂直滚动条和修改滚动条的样式兼容谷歌和火狐全部内容,希望文章能够帮你解决产生垂直滚动条和修改滚动条的样式兼容谷歌和火狐所遇到的程序开发问题。

如果觉得前端之家网站内容还不错,欢迎将前端之家网站推荐给前端开发程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。