讲解
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; }
