産生垂直滾動條和修改滾動條的樣式相容谷歌和火狐

我們為什麼會處理浏覽器滾動條的樣式了？
因為浏覽器的滾動條，會影響頁面的寬哈；
當頁面的寬度發生變化時，那麼頁面的内容排版就會發生變化！
是以我們必須處理浏覽器      

講解

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

遇見問題，這是你成長的機會，如果你能夠解決，這就是收獲。

作者：晚來南風晚相識​

本文版權歸作者所有，歡迎轉載，未經作者同意須保留此段聲明，在文章頁面明顯位置給出原文連接配接