webkit scroller bar自定義垂直高度

我正在創建一個通知框，爲此，要自定義webkit滾動條的垂直高度，以便我可以節省空間並使用它顯示其他信息，例如添加關閉按鈕。webkit scroller bar自定義垂直高度

在中心，我有我想顯示內容（消息）。它將佔據整個中心區域（高度：100％）。

在右側，我在頂部有一個關閉按鈕，然後是一個用於中心內容區域（其高度小於其內容區域）的滾動條。

有沒有任何CSS的方式與HTML的幫助下，我可以完成預期的結果。

注意：不需要包含JavaScript和其他庫。只是純粹的CSS + HTML

支持的瀏覽器：只有鍍鉻

我GOOGLE了，但我認爲這是沒有辦法的（至少我發現..）提供，直到我們使用任何一種樣式庫。

***** COMMENT *****

@LGSon 滾動條的拇指還在不在初始狀態完全可見。添加截圖以便更好地理解。

在第二個屏幕截圖中，我們都能夠看到滾動條拇指的全高度，而不是一日一。

環境：的Chrome版本56.0.2924.87（64位），MacOS的塞拉利昂v10.12

來源

2017-02-18 Mohit Pandey

不能更改垂直滾動條的高度，但你可以做這樣的事情， ~~其中一個給第一個滾動按鈕的高度與關閉按鈕~~ 的高度相同，其中一個按鈕給拇指/跟蹤器一個邊緣頂部，然後它將調整拇指/跟蹤器的大小以完全適合下面的空間。

注意，如通過@Mohit潘迪中，「滾動按鈕高度」（第一樣品）溶液似乎not working properly on Mac指出，「邊距」確實（第二樣品）

樣品1

.wrapper { 
 
    position: relative; 
 
    width: 200px; 
 
    height: 70px; 
 
    border: 1px solid black; 
 
    overflow: hidden; 
 
} 
 

 
.scroller { 
 
    height: 100%; 
 
    overflow: auto; 
 
} 
 

 
.close { 
 
    position: absolute; 
 
    right: 0; 
 
    top: 0; 
 
    background: #B00; 
 
    padding: 1px 3px; 
 
    color: white; 
 
    cursor: pointer; 
 
} 
 

 
.scroller::-webkit-scrollbar { 
 
    width: 18px; 
 
} 
 

 
.scroller::-webkit-scrollbar-thumb { 
 
    background: gray; 
 
    height: 25px; 
 
} 
 

 
.scroller::-webkit-scrollbar-track-piece { 
 
    background: lightgray; 
 
} 
 

 
.scroller::-webkit-scrollbar-button:start { 
 
    height: 20px; 
 
}

<div class="wrapper"> 
 
    <div class="close">X</div> 
 
    <div class="scroller"> 
 
    Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content 
 
    </div> 
 
</div>

樣品2

.wrapper { 
 
    position: relative; 
 
    width: 200px; 
 
    height: 70px; 
 
    border: 1px solid black; 
 
    overflow: hidden; 
 
} 
 
.scroller { 
 
    height: 100%; 
 
    overflow: auto; 
 
} 
 
.close { 
 
    position: absolute; 
 
    right: 0; 
 
    top: 0; 
 
    background: #B00; 
 
    padding: 1px 3px; 
 
    color: white; 
 
    cursor: pointer; 
 
} 
 

 
.scroller::-webkit-scrollbar { 
 
    width: 18px; 
 
} 
 
.scroller::-webkit-scrollbar-thumb { 
 
    background: gray; 
 
    height: 28px; 
 
    border-radius: 9px; 
 
    margin-top: 20px; 
 
} 
 
.scroller::-webkit-scrollbar-track-piece { 
 
    background: lightgray; 
 
    border-radius: 9px; 
 
    margin-top: 20px; 
 
}

<div class="wrapper"> 
 
    <div class="close">X</div> 
 
    <div class="scroller"> 
 
    Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content 
 
    </div> 
 
</div>

來源

2017-02-18 12:25:37 LGSon

webkit scroller bar自定義垂直高度

回答

相關問題