在webkit滾動條和屏幕邊緣之間留出一些空間

Question

我已經有了這個CSS代碼，使webkit的滾動條。

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

這將使一個滾動條，這將是旁邊的屏幕邊緣。有什麼辦法可以在屏幕邊緣和滾動條之間放置一些空間？

Answer 1

Here是我認爲你在談論的一個有趣的解決方案;他們實際上把身體元件上填充/位置：

body { 
    position: absolute; 
    top: 20px; 
    left: 20px; 
    bottom: 20px; 
    right: 20px; 
    padding: 30px; 
    overflow-y: scroll; 
    overflow-x: hidden; 
} 

Answer 2

更改滾動元件的寬度。例如...

#div_content { 
    width: calc(100% - 20px); 
} 

通過這種方式，頁面的其他元素不受影響。例如。

<div id="div_header">Welcome</div> 

<div id="div_content"> 
    Scrollable content goes here. 
</div> 

<div id="div_footer">©2015 by Whomever</div> 

樣品CSS ...

#div_header { 
    position: absolute; 
    left: 0; 
    top: 0; 
    width: 100%; 
    height: 100px; 
} 

#div_content { 
    position: absolute; 
    left: 0; 
    top: 100px; 
    width: calc(100% - 20px); 
    height: calc(100% - 140px); 

    padding: 50px; 

    overflow-x: hidden; 
    overflow-y: auto; 
} 

#div_content::-webkit-scrollbar { 
    -webkit-appearance: none; 
} 

#div_content::-webkit-scrollbar:vertical { 
    width: 5px; 
} 

#div_content::-webkit-scrollbar:horizontal { 
    height: 5px; 
} 

#div_content::-webkit-scrollbar-thumb { 
    border-radius: 8px; 
    border: none; 
    background-color: #404040; 
} 

#div_footer { 
    position: absolute; 
    left: 0; 
    bottom: 0; 
    width: 100%; 
    height: 40px; 
}