產生垂直滾動條的三個因素和修改滾動條的樣式

產生垂直滾動條的三個因素和修改滾動條的樣式

講解
hidden-ovflow-box 是產生滾動條的區域

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

產生滾動條的三個必要因素
/控制滾動條里面滑塊的高度/
.teacherstudent-page .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###

.teacherstudent-page .hidden-ovflow-box{
    height: calc(100% - 179px);
    overflow: hidden;
    overflow-y: auto;
}
/* 滾動條樣式開始 */
.teacherstudent-page .hidden-ovflow-box::-webkit-scrollbar {
  /*滾動條整體樣式*/
  width: 10px; /*修改滾動條的寬度*/
  /*高寬分別對應橫豎滾動條的尺寸*/
  height: 4px;
}

.teacherstudent-page  .hidden-ovflow-box::-webkit-scrollbar-thumb {
  /*滾動條里面小方塊*/
  border-radius: 5px;
  background: #cccccc;
  height: 200px; /*控制滾動條里面滑塊的高度*/
}

.teacherstudent-page  .hidden-ovflow-box::-webkit-scrollbar-track {
  /*滾動條里面軌道*/
  border-radius: 0;
  background: #e5e7ef;
}