웹킷 스크롤바와 화면 가장자리 사이에 약간의 공간을 두십시오.

Question

웹킷 스크롤바를 만드는이 CSS 코드가 있습니다.

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

이 바로 옆 화면 가장자리에 될 것입니다 스크롤바를 만들 것입니다. 어떤 공간을화면 가장자리과 스크롤바 사이에 넣을 수있는 방법이 있습니까?

Answer 1

Here은 내가 당신이 말하는 것에 대해 흥미로운 해결책입니다. 그들은 실제로 body 요소에 패딩/위치를 넣어 :

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