как настроить полосы прокрутки с HTML и CSS

Question

, как изменить по умолчанию стиль полосы прокрутки для пользовательских полос прокрутки,

это возможно сделать с HTML и CSS без Java Script и J запроса

Заранее спасибо

Answer 1

В некоторых браузерах возможно только CSS.

http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-styling-scrollbars-to-match-your-ui-design/

Иначе вы должны использовать JavaScript.

Answer 2

Вы можете изменить цвет, но в настоящее время это работает только на веб-браузерах.

::-webkit-scrollbar { 
    width: 12px; 
} 

/* Track */ 
::-webkit-scrollbar-track { 
    /*-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.8);*/ 
    -webkit-border-radius: 10px; 
    background-color:#fff; 
    border-radius: 10px; 
} 

/* Handle */ 
::-webkit-scrollbar-thumb { 
    -webkit-border-radius: 10px; 
    border-radius: 10px; 
    background:#666; 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
} 

Answer 3

простой пример

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

 
/* Let's get this party started */ 
 
::-webkit-scrollbar { 
 
    width: 12px; 
 
} 
 
    
 
/* Track */ 
 
::-webkit-scrollbar-track { 
 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
 
    -webkit-border-radius: 10px; 
 
    border-radius: 10px; 
 
} 
 
    
 
/* Handle */ 
 
::-webkit-scrollbar-thumb { 
 
    -webkit-border-radius: 10px; 
 
    border-radius: 10px; 
 
    background: rgba(255,0,0,0.8); 
 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
 
} 
 
::-webkit-scrollbar-thumb:window-inactive { 
 
background: rgba(255,0,0,0.4);

<p> 
 
During Roman times, 
 
    there were many variant forms of the letter "A". 
 
    First was the monumental or lapidary style, which was used when inscribing on stone or other "permanent" mediums. 
 
    There was also a cursive style used for everyday or utilitarian writing, 
 
    which was done on more perishable surfaces. 
 
    Due to the "perishable" nature of these surfaces, 
 
    there as not as many examples of this style as there are of the monumental, but there are still many surviving examples of different types of cursive, such as majuscule cursive, 
 
    minuscule cursive, and semicursive minuscule. 
 
    Variants also existed that were intermediate between the monumental and cursive styles. The known variants include the early semi-uncial, 
 
    the uncial, and the later semi-uncial.[5] 
 
</p> 
 
<p> 
 
During Roman times, there were many variant forms of the letter "A". First was the monumental or lapidary style, which was used when inscribing on stone or other "permanent" mediums. There was also a cursive style used for everyday or utilitarian writing, which was done on more perishable surfaces. Due to the "perishable" nature of these surfaces, there as not as many examples of this style as there are of the monumental, but there are still many surviving examples of different types of cursive, such as majuscule cursive, minuscule cursive, and semicursive minuscule. Variants also existed that were intermediate between the monumental and cursive styles. The known variants include the early semi-uncial, the uncial, and the later semi-uncial.[5]</p>