Come può essere nascosta la barra di scorrimento? Voglio farlo perché la barra di scorrimento non è carina.Come nascondere la barra di scorrimento utilizzando JavaScript
overflow:hidden non è utile, perché il mio elemento div ha molti altri elementi.
Quindi l'impostazione overflow non risolve il mio problema.
È possibile nascondere la barra di scorrimento con questo ...
document.body.style.overflow = 'hidden';
... e visualizzare con questo:
document.body.style.overflow = 'visible';
Tuttavia, è necessario mettere in discussione se stessi se questo è davvero quello che volere. Le barre di scorrimento appaiono affinché le persone possano vedere cose che sono al di fuori dei loro piccoli schermi.
Questo è utile se hai un elemento nella pagina che contiene le proprie barre di scorrimento per le cose all'interno (pensa una griglia con molte colonne) e non vuoi che il browser mostri le barre di scorrimento per il contenuto all'interno dell'altro elemento (che è overflow: nascosto) – tster
che rimuove quella capacità di scorrimento del mouse, volevo che la barra di scorrimento sparisse ma che fosse comunque in grado di scorrere con il mouse. –
Come scritto sopra, se si utilizza un browser webkit, è possibile nasconderlo con html :: - webkit-scrollbar, html :: - mozilla-scrollbar { display: nessuno; } – Sprottenwels
È necessario utilizzare la proprietà CSS overflow, che "gestisce" ciò che dovrebbe accadere quando il contenuto di un determinato elemento supera i propri limiti. Impostandolo su hidden si nascondono le barre di scorrimento.
overflow: hidden;
o
someElement.style.overflow = 'hidden';
miei occhi male quando ho letto la tua domanda. Tuttavia, è impossibile nascondere la barra di scorrimento del browser senza impostare "overflow: hidden" (?!). È un comportamento predefinito del browser.
Dato che il div ha molti altri elementi, perché non si imposta la larghezza e l'altezza corrette? Altrimenti, per favore fallo scorrere in modo che gli utenti possano leggere completamente il tuo contenuto.
che non è corretto. Per i browser Webkit, esiste anche una proprietà css html :: - webkit-scrollbar { display: nessuno; } – Sprottenwels
Grazie a @Sprottenwels! –
dovete sovrascrivere le impostazioni CSS come segue:
<style type="text/css">
#YourSpecialDiv { overflow: hidden !important; }
</style>
E il div si dovrebbe aggiungere il tag id cioè
<div id="YourSpecialDiv"...>...</div>
Il modo migliore per farlo sarebbe una sorta di pseudo selettore di elemento css. Ma penso solo al webkit (Chrome/Safari) has one for the scrollbar, quindi non è molto cross browser.
Un'alternativa hacky è quello di avvolgere in un div che nasconde la barra di scorrimento, impostando il width più piccolo del div contenuto in base alle dimensioni della barra di scorrimento
DEMO (potrebbe richiedere un po 'per ottenere il css perfetto, ma si ottiene l'essenza)
Il problema qui è che le dimensioni della barra di scorrimento differiscono per browser, quindi sarà necessario rendere il div esterno più grande della larghezza della barra di scorrimento più piccola. E per non tagliare alcun contenuto nei browser con le barre di scorrimento più piccole, sarebbe meglio aggiungere il riempimento della più grande differenza di dimensioni per le barre di scorrimento.
questa è una risposta solo css, concordo con @ Aki143S, in quello [utilizzando javascript] (http://stackoverflow.com/questions/3293650/hide-scrollbar-while-still-able-to-scroll-with-mouse -keyboard) è una soluzione molto più bella, robusta e indipendente dal browser – Hashbrown
Non penso che esista un modo per nascondere correttamente le barre di scorrimento. Cosa overflow:hidden, overflow-x:hidden e overflow-y:hidden do è effettivamente "se esce da 100vw/100vh/100vw a 100vh, quindi non visualizzarlo". L'overflow è solo non visualizza ciò che è al di fuori della vista corrente (iniziale tbh).
Nasconde la barra di scorrimento perché tutto ciò che è nell'HTML che dovrebbe trovarsi all'esterno non si troverà sulla pagina durante la visualizzazione (non è necessario scorrere, quindi nessuna barra di scorrimento).
L'unico disponibile è nascondere (qui per nascondere la barra di scorrimento asse Y):
[container]{
overflow:scroll;
overflow-x:hidden;
}
[container]::-webkit-scrollbar{
width:0;
background-color:transparent;
}
che è una vera pelle di barra di scorrimento, e purtroppo funziona solo su browser basati su WebKit.
Se un giorno tutti i venditori accettano questo, sarà fantastico e alla fine riusciremo a nascondere le barre di scorrimento.
var container = document.querySelectorAll("div.container")[0];
container.addEventListener("wheel", function(event) {
/*Mouse wheel scrolled down*/
if (event.deltaY > 0)
container.scrollTop += 30;
/*Mouse wheel scrolled up*/
else
container.scrollTop -= 30;
}, false);div.container {
height: 15rem;
width: 20rem;
overflow: hidden;
padding: 1rem;
border: 1px solid;
font-family: "Seoge UI", "Calibri", sans-serif;
font-size: 1.25rem;
line-height: 1.5rem;
}<div class="container">
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus odio, scelerisque vel sollicitudin sed, ullamcorper sed dolor. Vivamus sed egestas nisl. Ut sollicitudin finibus tortor sit amet posuere. Cras erat massa, auctor non urna quis, interdum sollicitudin sapien. Pellentesque gravida ullamcorper est. Maecenas accumsan lobortis mauris, et auctor urna mattis et. Fusce venenatis, magna blandit faucibus sodales, tortor nunc lacinia ligula, bibendum euismod leo felis placerat velit. Fusce sed arcu vitae metus ultricies tincidunt auctor a diam. Duis at augue efficitur eros rutrum iaculis. Praesent eu maximus orci. Praesent lobortis semper elit vitae convallis. Donec consequat lectus tortor, vel aliquam diam fringilla ut. Sed ac tempus justo. Ut bibendum euismod magna, id egestas lacus pulvinar ut. Sed sit amet felis ornare, gravida leo ac, semper dui.</span> Pellentesque efficitur eget nisl tincidunt gravida. Aenean sed nisl commodo, porta lectus in, tincidunt dui. Vivamus eget nunc ipsum. Praesent sed quam odio. Proin aliquam dapibus dictum. Maecenas tristique lorem id erat venenatis, a varius nibh accumsan.
Nulla tempor sagittis odio, nec ultricies sem posuere ornare. Vestibulum sit amet consequat neque. Cras iaculis eleifend nisi. Sed erat mauris, fringilla nec congue quis, lobortis in justo. Quisque sit amet metus id ligula mattis elementum. Morbi sodales,
dui eget fringilla pretium, sem tellus posuere dolor, id pharetra neque elit ac nisl.<br /> Quisque <br />nibh<br />enim,<br />mattis<br />a<br />aliquam<br />eget,<br />luctus<br />id<br />velit.<br />Pellentesque<br />sodales<br />eros<br />eget<br
/>diam<br />gravida<br />porta.<br />Maecenas<br />leo<br />tortor,<br />malesuada<br />quis<br />euismod<br />sed,<br />dictum<br />ut<br />nulla.<br />Vestibulum<br />in<br />massa<br />a<br />quam<br />vehicula<br />placerat<br />in<br />quis<br
/>libero.<br />Maecenas<br />convallis<br />bibendum<br />faucibus.<br />In<br />porttitor<br />quis<br />justo<br />non<br />tincidunt.<br />Pellentesque<br />at<br />justo<br />tincidunt,<br />auctor<br />tortor<br />at,<br />tempus<br />eros. <br
/>Generated: 5 paragraphs, 414 words and 2814 bytes of Lorem Ipsum
</div>È possibile utilizzare il seguente su ogni elemento:
::-webkit-scrollbar {
width: 0px;
}
Questo funziona solo su browser Webkit, in modo che nessun IE e Firefox.
può essere questa risposta può aiutare: http://stackoverflow.com/questions/3293650/hide-scrollbar-while-still-able-to-scroll-with-mouse-keyboard – Aki143S