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