Come posso personalizzare una barra di scorrimento tramite CSS (Cascading Style Sheets) per una div
e non per l'intera pagina?
Come posso personalizzare una barra di scorrimento tramite CSS (Cascading Style Sheets) per una div
e non per l'intera pagina?
Risposte:
Ho pensato che sarebbe stato utile consolidare le informazioni più recenti su barre di scorrimento, CSS e compatibilità del browser.
Attualmente non esistono definizioni di stile CSS per la barra di scorrimento tra browser. L'articolo del W3C che cito alla fine ha la seguente dichiarazione ed è stato recentemente aggiornato (10 ottobre 2014):
Alcuni browser (IE, Konqueror) supportano le proprietà non standard 'scrollbar-shadow-color', 'scrollbar-track-color' e altri. Queste proprietà sono illegali: non sono né definite in alcuna specifica CSS né sono contrassegnate come proprietarie (prefissandole con "-vendor-")
Come altri hanno già detto, Microsoft supporta lo stile della barra di scorrimento, ma solo per IE8 e versioni successive.
Esempio:
<!-- language: lang-css -->
.TA {
scrollbar-3dlight-color:gold;
scrollbar-arrow-color:blue;
scrollbar-base-color:;
scrollbar-darkshadow-color:blue;
scrollbar-face-color:;
scrollbar-highlight-color:;
scrollbar-shadow-color:
}
Allo stesso modo, WebKit ora ha la sua versione:
Dalle barre di scorrimento personalizzate in WebKit , CSS pertinente:
/* pseudo elements */
::-webkit-scrollbar { }
::-webkit-scrollbar-button { }
::-webkit-scrollbar-track { }
::-webkit-scrollbar-track-piece { }
::-webkit-scrollbar-thumb { }
::-webkit-scrollbar-corner { }
::-webkit-resizer { }
/* pseudo class selectors */
:horizontal
:vertical
:decrement
:increment
:start
:end
:double-button
:single-button
:no-button
:corner-present
:window-inactive
A partire dalla versione 64 Firefox supporta lo stile della barra di scorrimento attraverso le proprietà scrollbar-color
(parzialmente, bozza W3C ) e scrollbar-width
( bozza W3C ). Alcune buone informazioni sull'implementazione possono essere trovate in questa risposta .
Le librerie e i plug-in JavaScript possono fornire una soluzione cross-browser. Ci sono molte opzioni
L'elenco potrebbe continuare. La soluzione migliore è cercare, cercare e testare le soluzioni disponibili. Sono sicuro che sarai in grado di trovare qualcosa che soddisfi le tue esigenze.
Nel caso in cui si desideri impedire lo stile della barra di scorrimento che non è stato correttamente preceduto da "-vendor", questo articolo su W3C fornisce alcune istruzioni di base . Fondamentalmente, dovrai aggiungere il seguente CSS a un foglio di stile utente associato al tuo browser. Queste definizioni sovrascriveranno lo stile della barra di scorrimento non valido su qualsiasi pagina visitata.
body, html {
scrollbar-face-color: ThreeDFace !important;
scrollbar-shadow-color: ThreeDDarkShadow !important;
scrollbar-highlight-color: ThreeDHighlight !important;
scrollbar-3dlight-color: ThreeDLightShadow !important;
scrollbar-darkshadow-color: ThreeDDarkShadow !important;
scrollbar-track-color: Scrollbar !important;
scrollbar-arrow-color: ButtonText !important;
}
Nota: questa risposta contiene informazioni provenienti da varie fonti. Se è stata utilizzata una fonte, è anche collegata a questa risposta.
Prova questo
Fonte: https://nicescroll.areaaperta.com/
Implementazione semplice
<script type="text/javascript">
$(document).ready(
function() {
$("html").niceScroll();
}
);
</script>
È una barra di scorrimento del plugin jQuery, quindi le barre di scorrimento sono controllabili e hanno lo stesso aspetto tra i vari sistemi operativi.
Le barre di scorrimento personalizzate non sono possibili con CSS, avrai bisogno di un po 'di magia JavaScript.
Alcuni browser supportano regole CSS non specifiche, come ::-webkit-scrollbar
in Webkit, ma non è l'ideale poiché funzionerà solo in Webkit. Anche IE aveva qualcosa del genere, ma non credo che lo supportino più.
Come molte persone, stavo cercando qualcosa che fosse:
... Ma ahimè - niente!
Bene, se vale la pena fare un lavoro ... Sono stato in grado di mettere in funzione qualcosa in circa 30 minuti. Disclaimer: ci sono molti problemi noti (e probabilmente alcuni ancora sconosciuti), ma mi chiedo a cosa servono le altre 2920 linee di JS in molte offerte!
var dragParams;
window.addEventListener('load', init_myscroll);
/* TODO: Much to do for v axis! */
function bardrag_mousemove(e) {
var pos = (e.clientX - dragParams.clientX) + dragParams.offsetLeft;
pos = Math.min(Math.max(0, pos), dragParams.maxLeft);
dragParams.slider.style.left = pos + 'px';
updateScrollPosition(dragParams.slider, pos);
}
function updateScrollPosition(slider, offsetVal) {
var bar = slider.parentNode;
var myscroll = bar.parentNode;
var maxView = myscroll.scrollWidth - myscroll.offsetWidth;
var maxSlide = bar.offsetWidth - slider.offsetWidth;
var viewX = maxView * offsetVal / maxSlide;
myscroll.scrollLeft = viewX;
bar.style.left = viewX + 'px';
}
function drag_start(e) {
var slider = e.target;
var maxLeft = slider.parentNode.offsetWidth - slider.offsetWidth;
dragParams = {
clientX: e.clientX,
offsetLeft: slider.offsetLeft,
slider: e.target,
maxLeft: maxLeft
};
e.preventDefault();
document.addEventListener('mousemove', bardrag_mousemove);
}
function drag_end(e) {
e.stopPropagation();
document.removeEventListener('mousemove', bardrag_mousemove);
}
function bar_clicked(e) {
var bar = e.target;
var slider = bar.getElementsByClassName('slider')[0];
if (bar.className == 'h bar') {
var maxSlide = bar.offsetWidth - slider.offsetWidth;
var sliderX = e.offsetX - (slider.offsetWidth / 2);
sliderX = Math.max(0, Math.min(sliderX, maxSlide));
slider.style.left = sliderX + 'px';
updateScrollPosition(slider, sliderX);
}
}
function init_myscroll() {
var myscrolls = document.getElementsByClassName('container');
for (var i = 0; i < myscrolls.length; i++) {
var myscroll = myscrolls[i];
var style = window.getComputedStyle(myscroll);
if (style.overflowY == 'scroll' || (style.overflowY == 'auto' && myscroll.offsetHeight < myscroll.scrollHeight)) {
addScroller(false, myscroll);
}
if (style.overflowX == 'scroll' || (style.overflowX == 'auto' && myscroll.offsetWidth < myscroll.scrollWidth)) {
addScroller(true, myscroll);
}
}
}
function addScroller(isX, myscroll) {
myscroll.className += ' myscroll';
var bar = document.createElement('div');
var slider = document.createElement('div');
var offsetDim = isX ? myscroll.offsetWidth : myscroll.offsetHeight;
var scrollDim = isX ? myscroll.scrollWidth : myscroll.scrollHeight;
var sliderPx = Math.max(30, (offsetDim * offsetDim / scrollDim));
slider.style.width = 100 * sliderPx / offsetDim + '%';
slider.className = 'slider';
bar.className = isX ? 'h bar' : 'v bar';
bar.appendChild(slider);
myscroll.appendChild(bar);
bar.addEventListener('click', bar_clicked);
slider.addEventListener('mousedown', drag_start);
slider.addEventListener('mouseup', drag_end);
bar.addEventListener('mouseup', drag_end);
document.addEventListener('mouseup', drag_end);
}
body {
background-color: #66f;
}
.container {
background-color: #fff;
width: 50%;
margin: auto;
overflow: auto;
}
.container > div:first-of-type {
width: 300%;
height: 100px;
background: linear-gradient(to right, red, yellow);
}
/* TODO: Much to do for v axis! */
.myscroll {
overflow: hidden;
position: relative;
}
.myscroll .bar {
background-color: lightgrey;
position: absolute;
}
.myscroll {
padding-bottom: 20px;
}
.myscroll .h {
height: 20px;
width: 100%;
bottom: 0;
left: 0;
}
.myscroll .slider {
background-color: grey;
position: absolute;
}
.myscroll .h .slider {
height: 100%;
}
<div class="container">
<div></div>
</div>
Ho provato molti plugin, la maggior parte di essi non supporta tutti i browser, preferisco iScroll e nanoScroller funziona con tutti questi browser:
Ma iScroll non funziona con il tocco!
demo iScroll : http://lab.cubiq.org/iscroll/examples/simple/
demo nanoScroller : http://jamesflorentino.github.io/nanoScrollerJS/
Si prega di controllare questo link. Esempio con demo funzionante
#style-1::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
background-color: #F5F5F5;
}
#style-1::-webkit-scrollbar
{
width: 12px;
background-color: #F5F5F5;
}
#style-1::-webkit-scrollbar-thumb
{
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: #555;
}
-webkit-
dell'approccio.
Firefox nuova versione (64) supporta CSS Scrollbars Module Level 1
.scroller {
width: 300px;
height: 100px;
overflow-y: scroll;
scrollbar-color: rebeccapurple green;
scrollbar-width: thin;
}
<div class="scroller">
Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi
welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.
Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette
tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato.
Dandelion cucumber earthnut pea peanut soko zucchini.
</div>
Fonte: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Scrollbars
Ecco un esempio di webkit che funziona per Chrome e Safari:
CSS:
::-webkit-scrollbar
{
width: 40px;
background-color:#4F4F4F;
}
::-webkit-scrollbar-button:vertical:increment
{
height:40px;
background-image: url(/Images/Scrollbar/decrement.png);
background-size:39px 30px;
background-repeat:no-repeat;
}
::-webkit-scrollbar-button:vertical:decrement
{
height:40px;
background-image: url(/Images/Scrollbar/increment.png);
background-size:39px 30px;
background-repeat:no-repeat;
}
Produzione:
.className::-webkit-scrollbar {
width: 10px;
background-color: rgba(0,0,0,0);
}
.className::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.5);
border-radius: 5px;
}
mi ha dato un bel cellulare / osx come uno.
È possibile applicare barre di scorrimento personalizzate agli elementi div personalizzati nei documenti HTML. Ecco un esempio che aiuta. https://codepen.io/adeelibr/pen/dKqZNb Ma per riassumere. Puoi fare qualcosa del genere.
<div class="scrollbar" id="style-1">
<div class="force-overflow"></div>
</div>
Il file CSS è simile al seguente.
.scrollbar
{
margin-left: 30px;
float: left;
height: 300px;
width: 65px;
background: #F5F5F5;
overflow-y: scroll;
margin-bottom: 25px;
}
.force-overflow
{
min-height: 450px;
}
#style-1::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
background-color: #F5F5F5;
}
#style-1::-webkit-scrollbar
{
width: 12px;
background-color: #F5F5F5;
}
#style-1::-webkit-scrollbar-thumb
{
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: #555;
}
Questo è ciò che Google utilizza da tempo in alcune delle sue applicazioni. Vedi nel codice che, se applichi le classi successive, in qualche modo nascondono la barra di scorrimento in Chrome, ma funziona ancora.
Le classi sono jfk-scrollbar
, jfk-scrollbar-borderless
ejfk-scrollbar-dark
.testg{ border:1px solid black; max-height:150px; overflow-y: scroll; overflow-x: hidden; width: 250px;}
.content{ height: 700px}
/* The google css code for scrollbars */
::-webkit-scrollbar {
height: 16px;
overflow: visible;
width: 16px
}
::-webkit-scrollbar-button {
height: 0;
width: 0
}
::-webkit-scrollbar-track {
background-clip: padding-box;
border: solid transparent;
border-width: 0 0 0 7px
}
::-webkit-scrollbar-track:horizontal {
border-width: 7px 0 0
}
::-webkit-scrollbar-track:hover {
background-color: rgba(0, 0, 0, .05);
box-shadow: inset 1px 0 0 rgba(0, 0, 0, .1)
}
::-webkit-scrollbar-track:horizontal:hover {
box-shadow: inset 0 1px 0 rgba(0, 0, 0, .1)
}
::-webkit-scrollbar-track:active {
background-color: rgba(0, 0, 0, .05);
box-shadow: inset 1px 0 0 rgba(0, 0, 0, .14), inset -1px 0 0 rgba(0, 0, 0, .07)
}
::-webkit-scrollbar-track:horizontal:active {
box-shadow: inset 0 1px 0 rgba(0, 0, 0, .14), inset 0 -1px 0 rgba(0, 0, 0, .07)
}
.jfk-scrollbar-dark::-webkit-scrollbar-track:hover {
background-color: rgba(255, 255, 255, .1);
box-shadow: inset 1px 0 0 rgba(255, 255, 255, .2)
}
.jfk-scrollbar-dark::-webkit-scrollbar-track:horizontal:hover {
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2)
}
.jfk-scrollbar-dark::-webkit-scrollbar-track:active {
background-color: rgba(255, 255, 255, .1);
box-shadow: inset 1px 0 0 rgba(255, 255, 255, .25), inset -1px 0 0 rgba(255, 255, 255, .15)
}
.jfk-scrollbar-dark::-webkit-scrollbar-track:horizontal:active {
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), inset 0 -1px 0 rgba(255, 255, 255, .15)
}
::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, .2);
background-clip: padding-box;
border: solid transparent;
border-width: 0 0 0 7px;
min-height: 28px;
padding: 100px 0 0;
box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1), inset 0 -1px 0 rgba(0, 0, 0, .07)
}
::-webkit-scrollbar-thumb:horizontal {
border-width: 7px 0 0;
padding: 0 0 0 100px;
box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1), inset -1px 0 0 rgba(0, 0, 0, .07)
}
::-webkit-scrollbar-thumb:hover {
background-color: rgba(0, 0, 0, .4);
box-shadow: inset 1px 1px 1px rgba(0, 0, 0, .25)
}
::-webkit-scrollbar-thumb:active {
background-color: rgba(0, 0, 0, 0.5);
box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.35)
}
.jfk-scrollbar-dark::-webkit-scrollbar-thumb {
background-color: rgba(255, 255, 255, .3);
box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .15), inset 0 -1px 0 rgba(255, 255, 255, .1)
}
.jfk-scrollbar-dark::-webkit-scrollbar-thumb:horizontal {
box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .15), inset -1px 0 0 rgba(255, 255, 255, .1)
}
.jfk-scrollbar-dark::-webkit-scrollbar-thumb:hover {
background-color: rgba(255, 255, 255, .6);
box-shadow: inset 1px 1px 1px rgba(255, 255, 255, .37)
}
.jfk-scrollbar-dark::-webkit-scrollbar-thumb:active {
background-color: rgba(255, 255, 255, .75);
box-shadow: inset 1px 1px 3px rgba(255, 255, 255, .5)
}
.jfk-scrollbar-borderless::-webkit-scrollbar-track {
border-width: 0 1px 0 6px
}
.jfk-scrollbar-borderless::-webkit-scrollbar-track:horizontal {
border-width: 6px 0 1px
}
.jfk-scrollbar-borderless::-webkit-scrollbar-track:hover {
background-color: rgba(0, 0, 0, .035);
box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .14), inset -1px -1px 0 rgba(0, 0, 0, .07)
}
.jfk-scrollbar-borderless.jfk-scrollbar-dark::-webkit-scrollbar-track:hover {
background-color: rgba(255, 255, 255, .07);
box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .25), inset -1px -1px 0 rgba(255, 255, 255, .15)
}
.jfk-scrollbar-borderless::-webkit-scrollbar-thumb {
border-width: 0 1px 0 6px
}
.jfk-scrollbar-borderless::-webkit-scrollbar-thumb:horizontal {
border-width: 6px 0 1px
}
::-webkit-scrollbar-corner {
background: transparent
}
body::-webkit-scrollbar-track-piece {
background-clip: padding-box;
background-color: #f5f5f5;
border: solid #fff;
border-width: 0 0 0 3px;
box-shadow: inset 1px 0 0 rgba(0, 0, 0, .14), inset -1px 0 0 rgba(0, 0, 0, .07)
}
body::-webkit-scrollbar-track-piece:horizontal {
border-width: 3px 0 0;
box-shadow: inset 0 1px 0 rgba(0, 0, 0, .14), inset 0 -1px 0 rgba(0, 0, 0, .07)
}
body::-webkit-scrollbar-thumb {
border-width: 1px 1px 1px 5px
}
body::-webkit-scrollbar-thumb:horizontal {
border-width: 5px 1px 1px
}
body::-webkit-scrollbar-corner {
background-clip: padding-box;
background-color: #f5f5f5;
border: solid #fff;
border-width: 3px 0 0 3px;
box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .14)
}
.jfk-scrollbar::-webkit-scrollbar {
height: 16px;
overflow: visible;
width: 16px
}
.jfk-scrollbar::-webkit-scrollbar-button {
height: 0;
width: 0
}
.jfk-scrollbar::-webkit-scrollbar-track {
background-clip: padding-box;
border: solid transparent;
border-width: 0 0 0 7px
}
.jfk-scrollbar::-webkit-scrollbar-track:horizontal {
border-width: 7px 0 0
}
.jfk-scrollbar::-webkit-scrollbar-track:hover {
background-color: rgba(0, 0, 0, .05);
box-shadow: inset 1px 0 0 rgba(0, 0, 0, .1)
}
.jfk-scrollbar::-webkit-scrollbar-track:horizontal:hover {
box-shadow: inset 0 1px 0 rgba(0, 0, 0, .1)
}
.jfk-scrollbar::-webkit-scrollbar-track:active {
background-color: rgba(0, 0, 0, .05);
box-shadow: inset 1px 0 0 rgba(0, 0, 0, .14), inset -1px 0 0 rgba(0, 0, 0, .07)
}
.jfk-scrollbar::-webkit-scrollbar-track:horizontal:active {
box-shadow: inset 0 1px 0 rgba(0, 0, 0, .14), inset 0 -1px 0 rgba(0, 0, 0, .07)
}
.jfk-scrollbar-dark.jfk-scrollbar::-webkit-scrollbar-track:hover {
background-color: rgba(255, 255, 255, .1);
box-shadow: inset 1px 0 0 rgba(255, 255, 255, .2)
}
.jfk-scrollbar-dark.jfk-scrollbar::-webkit-scrollbar-track:horizontal:hover {
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2)
}
.jfk-scrollbar-dark.jfk-scrollbar::-webkit-scrollbar-track:active {
background-color: rgba(255, 255, 255, .1);
box-shadow: inset 1px 0 0 rgba(255, 255, 255, .25), inset -1px 0 0 rgba(255, 255, 255, .15)
}
.jfk-scrollbar-dark.jfk-scrollbar::-webkit-scrollbar-track:horizontal:active {
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), inset 0 -1px 0 rgba(255, 255, 255, .15)
}
.jfk-scrollbar::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, .2);
background-clip: padding-box;
border: solid transparent;
border-width: 0 0 0 7px;
min-height: 28px;
padding: 100px 0 0;
box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1), inset 0 -1px 0 rgba(0, 0, 0, .07)
}
.jfk-scrollbar::-webkit-scrollbar-thumb:horizontal {
border-width: 7px 0 0;
padding: 0 0 0 100px;
box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1), inset -1px 0 0 rgba(0, 0, 0, .07)
}
.jfk-scrollbar::-webkit-scrollbar-thumb:hover {
background-color: rgba(0, 0, 0, .4);
box-shadow: inset 1px 1px 1px rgba(0, 0, 0, .25)
}
.jfk-scrollbar::-webkit-scrollbar-thumb:active {
background-color: rgba(0, 0, 0, 0.5);
box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.35)
}
.jfk-scrollbar-dark.jfk-scrollbar::-webkit-scrollbar-thumb {
background-color: rgba(255, 255, 255, .3);
box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .15), inset 0 -1px 0 rgba(255, 255, 255, .1)
}
.jfk-scrollbar-dark.jfk-scrollbar::-webkit-scrollbar-thumb:horizontal {
box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .15), inset -1px 0 0 rgba(255, 255, 255, .1)
}
.jfk-scrollbar-dark.jfk-scrollbar::-webkit-scrollbar-thumb:hover {
background-color: rgba(255, 255, 255, .6);
box-shadow: inset 1px 1px 1px rgba(255, 255, 255, .37)
}
.jfk-scrollbar-dark.jfk-scrollbar::-webkit-scrollbar-thumb:active {
background-color: rgba(255, 255, 255, .75);
box-shadow: inset 1px 1px 3px rgba(255, 255, 255, .5)
}
.jfk-scrollbar-borderless.jfk-scrollbar::-webkit-scrollbar-track {
border-width: 0 1px 0 6px
}
.jfk-scrollbar-borderless.jfk-scrollbar::-webkit-scrollbar-track:horizontal {
border-width: 6px 0 1px
}
.jfk-scrollbar-borderless.jfk-scrollbar::-webkit-scrollbar-track:hover {
background-color: rgba(0, 0, 0, .035);
box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .14), inset -1px -1px 0 rgba(0, 0, 0, .07)
}
.jfk-scrollbar-borderless.jfk-scrollbar-dark.jfk-scrollbar::-webkit-scrollbar-track:hover {
background-color: rgba(255, 255, 255, .07);
box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .25), inset -1px -1px 0 rgba(255, 255, 255, .15)
}
.jfk-scrollbar-borderless.jfk-scrollbar::-webkit-scrollbar-thumb {
border-width: 0 1px 0 6px
}
.jfk-scrollbar-borderless.jfk-scrollbar::-webkit-scrollbar-thumb:horizontal {
border-width: 6px 0 1px
}
.jfk-scrollbar::-webkit-scrollbar-corner {
background: transparent
}
body.jfk-scrollbar::-webkit-scrollbar-track-piece {
background-clip: padding-box;
background-color: #f5f5f5;
border: solid #fff;
border-width: 0 0 0 3px;
box-shadow: inset 1px 0 0 rgba(0, 0, 0, .14), inset -1px 0 0 rgba(0, 0, 0, .07)
}
body.jfk-scrollbar::-webkit-scrollbar-track-piece:horizontal {
border-width: 3px 0 0;
box-shadow: inset 0 1px 0 rgba(0, 0, 0, .14), inset 0 -1px 0 rgba(0, 0, 0, .07)
}
body.jfk-scrollbar::-webkit-scrollbar-thumb {
border-width: 1px 1px 1px 5px
}
body.jfk-scrollbar::-webkit-scrollbar-thumb:horizontal {
border-width: 5px 1px 1px
}
body.jfk-scrollbar::-webkit-scrollbar-corner {
background-clip: padding-box;
background-color: #f5f5f5;
border: solid #fff;
border-width: 3px 0 0 3px;
box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .14)
}
<div class="testg">
<div class="content">
Look Ma' my scrollbars doesn't have arrows <br /><br />
content, content, content <br /> content, content, content <br /> content, content, content s<br /> content, content, content <br/> content, content, content <br/> content, content, content d<br/> content, content, content <br/>
</div>
</div>
<br/>
<div class="testg jfk-scrollbar jfk-scrollbar-borderless jfk-scrollbar-dark">
<div class="content">
Look Ma' my scrollbars dissapear in chrome<br /><br />
content, content, content <br /> content, content, content <br /> content, content, content s<br /> content, content, content <br/> content, content, content <br/> content, content, content d<br/> content, content, content <br/>
</div>
</div>
http://jsfiddle.net/76kcuem0/32/
Ho appena trovato utile rimuovere le frecce dalle barre di scorrimento. A partire dal 2015 è stato utilizzato in Google Maps durante la ricerca di luoghi nell'elenco dei risultati nell'interfaccia utente di progettazione dei materiali.
La barra di scorrimento di Webkit non supporta la maggior parte dei browser.
Supporta su CHROME
Ecco una demo per la barra di scorrimento di webkit Barra di scorrimento di Webkit DEMO
Se stai cercando altri esempi, dai un'occhiata a Altri esempi
Un altro metodo è il plugin della barra di scorrimento di Jquery
Supporta tutti i browser e facile da applicare
Scarica il plug-in da Scarica qui
Come usare e per ulteriori opzioni CONTROLLARE QUESTO
Ho provato molti scroll JS e CSS e ho scoperto che era molto facile da usare e testato su IE, Safari e FF e ha funzionato bene
Come suggerisce @thebluefox
Ecco come funziona
Aggiungi il seguente script al
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<script type="text/javascript" src="jquery.ui.touch-punch.min.js"></script>
<script type="text/javascript" src="facescroll.js"></script>
<script type="text/javascript">
jQuery(function(){ // on page DOM load
$('#demo1').alternateScroll();
$('#demo2').alternateScroll({ 'vertical-bar-class': 'styled-v-bar', 'hide-bars': false });
})
</script>
E questo qui nel paragrafo in cui è necessario scorrere
<div id="demo1" style="width:300px; height:250px; padding:8px; resize:both; overflow:scroll">
**Your Paragraph Comes Here**
</div>
Per maggiori dettagli visita la pagina dei plugin
Barra di scorrimento personalizzata FaceScroll
spero che sia d'aiuto
Per le persone che sono ancora alla ricerca di una buona soluzione, ho scoperto questo plugin simplebar
Libreria javascript alla vaniglia con barre di scorrimento personalizzate con scorrimento nativo, semplice, leggera, facile da usare e cross-browser.
Nel mio caso, stavo cercando soluzioni di reattore, l'autore fornisce anche involucri per reagire, angolare, vue e prossimi esempi
I browser Webkit (come Chrome, Safari e Opera) supportano l' elemento pseudo non standard :: - webkit-scrollbar , che ci consente di modificare l'aspetto della barra di scorrimento del browser.
Nota: La :: - webkit-scrollbar non è supportata da Firefox o IE e Edge.
* {
box-sizing: border-box;
font-family: sans-serif;
}
div {
width: 15rem;
height: 8rem;
padding: .5rem;
border: 1px solid #aaa;
margin-bottom: 1rem;
overflow: auto;
}
.box::-webkit-scrollbar {
width: .8em;
}
.box::-webkit-scrollbar-track {
box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
}
.box::-webkit-scrollbar-thumb {
background-color: dodgerblue;
}
<div class="box">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate</p>
</div>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate</p>
</div>
Riferimento: come creare una barra di scorrimento personalizzata
Usa solo CSS funziona in Firefox +64
.mycoldiv{
scrollbar-color: white rebeccapurple;
scrollbar-width: thin;
display: block;
height:400px;
overflow-x: auto;
}
Ulteriori informazioni: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Scrollbars
Supponiamo di avere il div come
<div class="custom_scroll"> ... </div>
Applica stili CSS come
//custom scroll style definitions
.custom_scroll
{
overflow-y: scroll;
}
//custom_scroll scrollbar styling
.custom_scroll::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
opacity: 0.5;
//background-color: #F5F5F5;
}
.custom_scroll::-webkit-scrollbar
{
width: 5px;
opacity: 0.5;
//background-color: #F5F5F5;
}
.custom_scroll::-webkit-scrollbar-thumb
{
border-radius: 10px;
opacity: 0.5;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
//background-color: #555;
}
Lo scorrimento risultante verrà visualizzato come
O usa qualcosa del genere:
var MiniScroll=function(a,b){function e(){c.scrollUpdate()}function f(){var a=new Date,b=Math.abs(a-c.animation.frame),d=c.countScrollHeight();c.animation.frame=a,c.render(b),d.height!=c.controls.height&&(e(),c.controls.height=d.height),requestAnimationFrame(f)}function g(){c.scrollUpdate()}function h(a){var b=c.target.scrollTop,d=Math.abs(a.wheelDeltaY/(10-c.speed));c.target.scrollTop=a.wheelDeltaY>0?b-d:b+d,c.scrollUpdate()}function i(a){if(a.target.classList.contains("scroll"))return a.preventDefault(),!1;var b=c.countScrollHeight();c.target.scrollTop=a.offsetY*b.mul-parseInt(b.height)/2,c.scrollUpdate()}b=b||{};var c=this,d={speed:"speed"in b?b.speed:7};this.target=document.querySelector(a),this.animation={frame:new Date,stack:[]},this.identity="scroll"+parseInt(1e5*Math.random()),this.controls={place:null,scroll:null,height:0},this.speed=d.speed,this.target.style.overflow="hidden",this.draw(),requestAnimationFrame(f),this.target.onscroll=g,this.target.addEventListener("wheel",h),this.controls.place.onclick=i};MiniScroll.prototype.scrollUpdate=function(){this.controls.place.style.height=this.target.offsetHeight+"px";var a=this.countScrollHeight();this.controls.scroll.style.height=a.height,this.controls.scroll.style.top=a.top},MiniScroll.prototype.countScrollHeight=function(){for(var a=this.target.childNodes,b=parseInt(this.target.offsetHeight),c=0,d=0;d<a.length;d++)a[d].id!=this.identity&&(c+=parseInt(a[d].offsetHeight)||0);var e=this.target.offsetHeight*parseFloat(1/(parseFloat(c)/this.target.offsetHeight)),f=this.controls.place.offsetHeight*(this.target.scrollTop/c)+"px";return{mul:c/this.target.offsetHeight,height:e>b?b+"px":e+"px",top:f}},MiniScroll.prototype.draw=function(){var a=document.createElement("div"),b=document.createElement("div");a.className="scroll-place",b.className="scroll",a.appendChild(b),a.id=this.identity,this.controls.place=a,this.controls.scroll=b,this.target.insertBefore(a,this.target.querySelector("*")),this.scrollUpdate()},MiniScroll.prototype.render=function(a){for(var b=0;b<this.animation.stack.length;b++){var c=this.animation.stack[b],d=parseInt(c.target);c.element.style[c.prop]=d+c.points}};
E inizializzare:
<body onload="new MiniScroll(this);"></body>
E personalizza:
.scroll-place { // ... // }
.scroll { // ... // }
overflow:auto;
solo a quello<div>
. Altri dettagli sullo sfondo?