1. 程式人生 > 其它 >滾動條常用樣式

滾動條常用樣式

// Scrollbars
.no-overlay-scrollbar {
  ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }

  ::-webkit-scrollbar:hover {
    height: 8px;
  }

  ::-webkit-scrollbar-button:start:decrement,
  ::-webkit-scrollbar-button:end:increment {
    display: none;
  }
  ::-webkit-scrollbar-button:horizontal:decrement 
{ display: none; } ::-webkit-scrollbar-button:horizontal:increment { display: none; } ::-webkit-scrollbar-button:vertical:decrement { display: none; } ::-webkit-scrollbar-button:vertical:increment { display: none; } ::-webkit-scrollbar-button:horizontal:decrement:active
{ background-image: none; } ::-webkit-scrollbar-button:horizontal:increment:active { background-image: none; } ::-webkit-scrollbar-button:vertical:decrement:active { background-image: none; } ::-webkit-scrollbar-button:vertical:increment:active { background-image: none; } ::-webkit-scrollbar-track-piece
{ background-color: transparent; } ::-webkit-scrollbar-thumb:vertical { height: 50px; background: -webkit-gradient( linear, left top, right top, color-stop(0%, $scrollbarBackground), color-stop(100%, $scrollbarBackground2) ); border: 1px solid $scrollbarBorder; border-top: 1px solid $scrollbarBorder; border-left: 1px solid $scrollbarBorder; } ::-webkit-scrollbar-thumb:horizontal { width: 50px; background: -webkit-gradient( linear, left top, left bottom, color-stop(0%, $scrollbarBackground), color-stop(100%, $scrollbarBackground2) ); border: 1px solid $scrollbarBorder; border-top: 1px solid $scrollbarBorder; border-left: 1px solid $scrollbarBorder; } }