Voglio mostrare sempre la barra di scorrimento verticale nella mia pagina web. È possibile utilizzare javascript? Penso che sia possibile utilizzare javascript o jQuery. Voglio la barra di scorrimento verticale se c'è abbastanza contenuto da mostrare o meno.Come mostrare sempre la barra di scorrimento verticale in un browser?
grazie.
jQuery non dovrebbe essere richiesto. Si potrebbe provare ad aggiungere il CSS:
body {overflow-y:scroll;}
Questo funziona attraverso i browser più recenti, anche IE6.
Credo che il 'overflow-x' e' overflow- x mi hanno dato qualche sofferenza in passato. –
Penso che questo visualizzerà la barra di scorrimento solo quando c'è overflow. Per visualizzare la barra di scorrimento prova sempre body { overflow-y: scroll; altezza: 101%; } –
Hai questo giro nel modo sbagliato. Se si imposta l'overflow: auto, le barre di scorrimento vengono visualizzate se necessario. overflow: scroll mostra sempre le barre di scorrimento. Se il contenuto non è abbastanza lungo, le barre di scorrimento sono disattivate. –
Basta usare CSS.
body {
overflow-y: scroll;
}
Nota che l'OP sta cercando di mostrare solo la barra di scorrimento * verticale *. La proprietà 'overflow' in questo caso indica anche la barra di scorrimento orizzontale. Dovresti invece usare 'overflow-y'. – Boaz
@rogerdpack In effetti ha, 3 anni fa; 4 ore dopo il commento originale :) – Boaz
impostare la overflow property di un contenente div a scroll.
provare a chiamare una funzione nel metodo onload del tag body e in quella funzione modificare lo stile di body come this document.body.style.overflow = 'scroll'; Inoltre potrebbe essere necessario impostare la larghezza del codice HTML come questo mostrerà barre di scorrimento orizzontale e
il file HTML sarà simile a questa
<script language="javascript">
function showscroll() {
document.body.style.overflow = 'scroll';
}
</script>
</head>
<body onload="showscroll()">
Bene, OP ha chiesto una soluzione Javascript, ma questo non significa che sia ciò di cui ha bisogno. Questa è una pessima soluzione per cambiare uno stile. Questo è ciò che il CSS è per: Fogli Cascaded ** Style **. Nei CSS è solo una riga, come la risposta accettata mostra. – stevenvh
Ecco un metodo. Questo non solo fornirà il contenitore della barra di scorrimento, ma mostrerà anche la barra di scorrimento anche se il contenuto non è sufficiente (secondo le tue necessità). Sarebbe anche su Iphone e dispositivi Android, così ..
<style>
.scrollholder {
position: relative;
width: 310px; height: 350px;
overflow: auto;
z-index: 1;
}
</style>
<script>
function isTouchDevice() {
try {
document.createEvent("TouchEvent");
return true;
} catch (e) {
return false;
}
}
function touchScroll(id) {
if (isTouchDevice()) { //if touch events exist...
var el = document.getElementById(id);
var scrollStartPos = 0;
document.getElementById(id).addEventListener("touchstart", function (event) {
scrollStartPos = this.scrollTop + event.touches[0].pageY;
event.preventDefault();
}, false);
document.getElementById(id).addEventListener("touchmove", function (event) {
this.scrollTop = scrollStartPos - event.touches[0].pageY;
event.preventDefault();
}, false);
}
}
</script>
<body onload="touchScroll('scrollMe')">
<!-- title -->
<!-- <div class="title" onselectstart="return false">Alarms</div> -->
<div class="scrollholder" id="scrollMe">
</div>
</body>
Solo una nota: In OS X Lion, di overflow impostato a "scorrere" si comporta più come auto in quanto le barre di scorrimento mostrerà solo quando viene utilizzato . Scompariranno quando non sono in uso. Quindi, se le soluzioni di cui sopra non sembrano funzionare potrebbe essere il motivo.
Questo è ciò che è necessario per risolvere il problema:
::-webkit-scrollbar {
-webkit-appearance: none;
width: 7px;
}
::-webkit-scrollbar-thumb {
border-radius: 4px;
background-color: rgba(0, 0, 0, .5);
-webkit-box-shadow: 0 0 1px rgba(255, 255, 255, .5);
}
È possibile lo stile di conseguenza.
Aggiungi la classe al div che vuoi essere scorrevole.
overflow-x: hidden; nasconde la barra di scorrimento orizzontale. Mentre overflow-y: scorrere; consente di scorrere verticalmente.
<!DOCTYPE html>
<html>
<head>
<style>
.scroll {
width: 500px;
height: 300px;
overflow-x: hidden;
overflow-y: scroll;
}
</style>
</head>
<body>
<div class="scroll"><h1> DATA </h1></div>
Sebbene questo codice possa rispondere alla domanda, fornire un contesto aggiuntivo su come e/o perché risolve il problema migliorerebbe il valore a lungo termine della risposta. – Badacadabra
Utilizzare il collegamento [modifica] per spiegare come funziona questo codice e non solo fornire il codice, poiché una spiegazione è più probabile che aiuti i futuri lettori. Vedi anche [risposta]. [fonte] (http://stackoverflow.com/users/5244995) –
Spiegazione aggiunta. –
devi chiedere queste cose per imparare. – Rimian
Possibile duplicato di [Rendere la barra di scorrimento principale sempre visibile] (https://stackoverflow.com/questions/1202425/making-the-main-scrollbar-always-visible) – Bae