【教學】根據瀏覽器高度決定是否使用捲軸 美化捲軸樣式 Show Scrollbar Depending on Browser Height

使用media query，當瀏覽器高度大於700px時不使用捲軸，瀏覽器高度小於700時才使用捲軸。

使用捲軸的方式為在class中加入「overflow-y: auto;」，並且指定高度「height :550px;」，如此當class的內容超過550px時，就會顯示捲軸。

後台「版面配置」→「新增小工具」→「HTML/JavaScropt」：

@media (min-height:700px) {
  .sidebar2.isOpen {
    transform: translate3d(500px,0,0);
    opacity: 0.99;

    overflow-y: auto; 
  }
}

@media (max-height:699px) {
  .sidebar2.isOpen {
    transform: translate3d(500px,0,0);
    opacity: 0.99;
    height: 550px;
    overflow-y: auto; 
  }
}

接著美化捲軸樣式：

div::-webkit-scrollbar {
  width: 15px;
  border: 5px solid white;
}

div::-webkit-scrollbar-thumb {
  background-color: #eeeeee;
  background-clip: padding-box;
  border: 0.05em solid #666666;
}

div::-webkit-scrollbar-thumb:hover {
  background-color: #dddddd;
}

div::-webkit-scrollbar-thumb:active {
  background-color: #bbbbbb;
}

div::-webkit-scrollbar-track {
  background-color: #eeeeee;
}

「div::-webkit-scrollbar」表示被div包起來部分的捲軸才會套用該設定，若將前面的div拿掉變成「::-webkit-scrollbar」則是所有網頁中的捲軸都會套用該設定。

• scrollbar的width指定捲軸寬度
• scrollbar-thumb指定捲軸中滑動部分的顏色與邊框樣式
• scrollbar-thumb:hover指定當滑鼠移到捲軸滑動部分時的顏色
• scrollbar-thumb:active指定當滑鼠按住捲軸滑動部分時的顏色
• scrollbar-track指定捲軸的背景顏色