Nascondere la barra di scorrimento su una pagina HTML
Risposte:
Impostare overflow: hidden;sul body tag in questo modo:
<style type="text/css">
body {
overflow: hidden;
}
</style>
Il codice sopra nasconde la barra di scorrimento orizzontale e verticale.
Se vuoi nascondere solo la barra di scorrimento verticale , usa overflow-y:
<style type="text/css">
body {
overflow-y: hidden;
}
</style>
E se vuoi nascondere solo la barra di scorrimento orizzontale , usa overflow-x:
<style type="text/css">
body {
overflow-x: hidden;
}
</style>
Nota: disabiliterà anche la funzione di scorrimento. Fare riferimento alle risposte seguenti se si desidera solo nascondere la barra di scorrimento, ma non la funzione di scorrimento.
hiddenscorrimento funzionerà con una rotellina del mouse. In Firefox, lo scorrimento non funziona con una rotellina del mouse, mi ci è voluto un po 'per capirlo.
overflow: hiddendisabilita lo scorrimento. Se qualcuno vuole nascondere la barra di scorrimento, presumibilmente ritengono che il controllo non sia necessario perché in primo luogo non ci sono contenuti da scorrere . O forse semplicemente non vogliono consentire lo scorrimento del tutto .
WebKit supporta gli pseudo elementi della barra di scorrimento che possono essere nascosti con le regole CSS standard:
#element::-webkit-scrollbar {
display: none;
}
Se si desidera nascondere tutte le barre di scorrimento, utilizzare
::-webkit-scrollbar {
display: none;
}
Non sono sicuro del ripristino: questo ha funzionato, ma potrebbe esserci un modo giusto per farlo:
::-webkit-scrollbar {
display: block;
}
Ovviamente puoi sempre usare width: 0, che può essere facilmente ripristinato con width: auto, ma non sono un fan degli abusi widthper le modifiche di visibilità.
Firefox 64 ora supporta la proprietà sperimentale di larghezza della barra di scorrimento per impostazione predefinita (63 richiede l'impostazione di un flag di configurazione). Per nascondere la barra di scorrimento in Firefox 64:
#element {
scrollbar-width: none;
}
Per vedere se il tuo browser corrente supporta l'elemento pseudo o scrollbar-width, prova questo frammento:
(Nota che questa non è davvero una risposta corretta alla domanda, perché nasconde anche le barre orizzontali, ma è quello che stavo cercando quando Google mi ha indicato qui, quindi ho pensato di pubblicarlo comunque.)
Sì, una specie di ..
Quando fai la domanda "Le barre di scorrimento di un browser possono essere rimosse in qualche modo, piuttosto che semplicemente nascoste o camuffate", tutti diranno "Non possibile" perché non è possibile rimuovere le barre di scorrimento da tutti i browser in un modo conforme e cross-compatibile, e poi c'è l'intero argomento dell'usabilità.
Tuttavia, è possibile impedire al browser di avere mai la necessità di generare e visualizzare barre di scorrimento se non si consente l'overflow della pagina Web.
Questo significa solo che dobbiamo sostituire in modo proattivo lo stesso comportamento che il browser in genere farebbe per noi e dire al browser grazie, ma no grazie amico. Invece di provare a rimuovere le barre di scorrimento (che tutti sappiamo non è possibile) possiamo evitare lo scorrimento (perfettamente fattibile) e scorrere all'interno degli elementi che creiamo e avere un maggiore controllo.
Crea un div con overflow nascosto. Rileva quando l'utente tenta di scorrere, ma non è possibile perché abbiamo disabilitato la capacità del browser di scorrere con overflow: nascosto .. e invece spostare il contenuto verso l'alto utilizzando JavaScript quando ciò si verifica. In tal modo creando il nostro scrolling senza lo scorrimento predefinito del browser o utilizzare un plug-in come iScroll .
---
Per il bene di essere accurati; tutti i modi specifici del fornitore per manipolare le barre di scorrimento:
Internet Explorer 5.5+
* Queste proprietà non facevano mai parte delle specifiche CSS, né erano mai state approvate o prefissate dal fornitore, ma funzionano in Internet Explorer e Konqueror. Questi possono anche essere impostati localmente nel foglio di stile utente per ogni applicazione. In Internet Explorer lo trovi nella scheda "Accessibilità", in Konqueror nella scheda "Fogli di stile".
body, html { /* These are defaults and can be replaced by hexadecimal color values */
scrollbar-base-color: aqua;
scrollbar-face-color: ThreeDFace;
scrollbar-highlight-color: ThreeDHighlight;
scrollbar-3dlight-color: ThreeDLightShadow;
scrollbar-shadow-color: ThreeDDarkShadow;
scrollbar-darkshadow-color: ThreeDDarkShadow;
scrollbar-track-color: Scrollbar;
scrollbar-arrow-color: ButtonText;
}
A partire da Internet Explorer 8 queste proprietà erano precedute dal prefisso da Microsoft, ma non erano ancora state approvate dal W3C .
-ms-scrollbar-base-color
-ms-scrollbar-face-color
-ms-scrollbar-highlight-color
-ms-scrollbar-3dlight-color
-ms-scrollbar-shadow-color
-ms-scrollbar-darkshadow-color
-ms-scrollbar-base-color
-ms-scrollbar-track-color
Ulteriori dettagli su Internet Explorer
Internet Explorer rende scrolldisponibile che imposta se disabilitare o abilitare le barre di scorrimento; può anche essere usato per ottenere il valore della posizione delle barre di scorrimento.
Con Microsoft Internet Explorer 6 e versioni successive, quando si utilizza la !DOCTYPEdichiarazione per specificare la modalità conforme agli standard, questo attributo si applica all'elemento HTML. Quando la modalità conformi agli standard non è specificato, come con le versioni precedenti di Internet Explorer, questo attributo si applica al BODYelemento, non l' HTMLelemento.
Vale anche la pena notare che quando si lavora con .NET la classe ScrollBar nel System.Windows.Controls.Primitivesframework di presentazione è responsabile del rendering delle barre di scorrimento.
http://msdn.microsoft.com/en-us/library/ie/ms534393(v=vs.85).aspx
- MSDN. Proprietà dell'interfaccia utente di base
- W3C. Informazioni sulle proprietà della barra di scorrimento non standard
- MSDN. Classe ScrollBar .NET
WebKit
Le estensioni WebKit relative alla personalizzazione della barra di scorrimento sono:
::-webkit-scrollbar {} /* 1 */
::-webkit-scrollbar-button {} /* 2 */
::-webkit-scrollbar-track {} /* 3 */
::-webkit-scrollbar-track-piece {} /* 4 */
::-webkit-scrollbar-thumb {} /* 5 */
::-webkit-scrollbar-corner {} /* 6 */
::-webkit-resizer {} /* 7 */
Ciascuno può essere combinato con altri pseudo-selettori:
:horizontal- La pseudo-classe orizzontale si applica a tutti i pezzi della barra di scorrimento che hanno un orientamento orizzontale.:vertical- La pseudo-classe verticale si applica a tutti i pezzi della barra di scorrimento che hanno un orientamento verticale.:decrement- La pseudo-classe di decremento si applica ai pulsanti e ai brani. Indica se il pulsante o la traccia diminuiranno o meno la posizione della vista quando utilizzato (ad esempio, su una barra di scorrimento verticale, a sinistra su una barra di scorrimento orizzontale).:increment- La pseudo-classe di incremento si applica ai pulsanti e ai brani. Indica se un pulsante o un brano traccia aumenterà o meno la posizione della vista quando viene utilizzato (ad esempio, verso il basso su una barra di scorrimento verticale, proprio su una barra di scorrimento orizzontale).:start- La pseudo-classe iniziale si applica ai pulsanti e ai brani. Indica se l'oggetto è posizionato davanti al pollice.:end- La pseudo-classe finale si applica ai pulsanti e ai brani. Indica se l'oggetto è posizionato dopo il pollice.:double-button- La pseudo-classe a doppio pulsante si applica a pulsanti e brani. Viene utilizzato per rilevare se un pulsante fa parte di una coppia di pulsanti che si trovano insieme alla stessa estremità di una barra di scorrimento. Per brani, indica se il brano è attaccato a una coppia di pulsanti.:single-button- La pseudo-classe a pulsante singolo si applica a pulsanti e brani. Viene utilizzato per rilevare se un pulsante si trova da solo alla fine di una barra di scorrimento. Per i brani indica se il brano è attaccato a un pulsante Singleton.:no-button- Si applica a pezzi della traccia e indica se il pezzo della pista corre o meno fino al bordo della barra di scorrimento, ovvero, non vi è alcun pulsante a quell'estremità della traccia.:corner-present- Si applica a tutti i pezzi della barra di scorrimento e indica se è presente o meno un angolo della barra di scorrimento.:window-inactive- Si applica a tutti i pezzi della barra di scorrimento e indica se la finestra contenente la barra di scorrimento è attualmente attiva. (Nei recenti nightly, questa pseudo-classe ora si applica anche a :: selection. Abbiamo in programma di estenderla per lavorare con qualsiasi contenuto e di proporla come una nuova pseudo-classe standard.)
Esempi di queste combinazioni
::-webkit-scrollbar-track-piece:start { /* Select the top half (or left half) or scrollbar track individually */ }
::-webkit-scrollbar-thumb:window-inactive { /* Select the thumb when the browser window isn't in focus */ }
::-webkit-scrollbar-button:horizontal:decrement:hover { /* Select the down or left scroll button when it's being hovered by the mouse */ }
Ulteriori dettagli su Chrome
addWindowScrollHandler public static HandlerRegistration addWindowScrollHandler (gestore Window.ScrollHandler)
Aggiunge un gestore Window.ScrollEvent Parametri: handler - the handler Restituisce: restituisce la registrazione del gestore [ fonte ] ( http://www.gwtproject.org/javadoc/latest/com/google/gwt/user/client/Window.html# addWindowScrollHandler (com.google.gwt.user.client.Window.ScrollHandler) )
Mozilla
Mozilla ha alcune estensioni per manipolare le barre di scorrimento, ma si consiglia di non usarle tutte.
-moz-scrollbars-noneSi consiglia di utilizzare overflow: nascosto al posto di questo.-moz-scrollbars-horizontalSimile a overflow-x-moz-scrollbars-verticalSimile a overflow-y-moz-hidden-unscrollableFunziona solo internamente con le impostazioni del profilo utente. Disabilita lo scorrimento degli elementi radice XML e disabilita l'uso dei tasti freccia e della rotellina del mouse per scorrere le pagine Web.
Ulteriori dettagli su Mozilla
Questo non è molto utile per quanto ne so, ma vale la pena notare che l'attributo che controlla se le barre di scorrimento sono visualizzate in Firefox è ( link di riferimento ):
- Attributo: barre di scorrimento
- Digitare: nsIDOMBarProp
- Descrizione: l'oggetto che controlla se le barre di scorrimento sono visualizzate nella finestra. Questo attributo è "sostituibile" in JavaScript. Sola lettura
Ultimo ma non meno importante, l'imbottitura è come per magia.
Come è stato precedentemente menzionato in alcune altre risposte, ecco un'illustrazione sufficientemente autoesplicativa.
Lezione di storia
Solo perché sono curioso, ho voluto conoscere l'origine delle barre di scorrimento e questi sono i migliori riferimenti che ho trovato.
- 10 invenzioni su scorrimento e barre di scorrimento
- https://tools.ietf.org/id/draft-hellstrom-textpreview-02.txt
- https://tools.ietf.org/id/draft-mrose-blocks-service-01.txt
miscellaneo
In una bozza di specifica HTML5, l' seamlessattributo è stato definito per impedire la visualizzazione delle barre di scorrimento in iFrame in modo che possano essere miscelate con il contenuto circostante in una pagina . Sebbene questo elemento non appaia nell'ultima revisione.
L' scrollbaroggetto BarProp è un figlio windowdell'oggetto e rappresenta l'elemento dell'interfaccia utente che contiene un meccanismo di scorrimento o un concetto di interfaccia simile. window.scrollbars.visibletornerà truese le barre di scorrimento sono visibili.
interface Window {
// The current browsing context
readonly attribute WindowProxy window;
readonly attribute WindowProxy self;
attribute DOMString name;
[PutForwards=href] readonly attribute Location location;
readonly attribute History history;
readonly attribute UndoManager undoManager;
Selection getSelection();
[Replaceable] readonly attribute BarProp locationbar;
[Replaceable] readonly attribute BarProp menubar;
[Replaceable] readonly attribute BarProp personalbar;
[Replaceable] readonly attribute BarProp scrollbars;
[Replaceable] readonly attribute BarProp statusbar;
[Replaceable] readonly attribute BarProp toolbar;
void close();
void focus();
void blur();
// Truncated
L'API Cronologia include anche funzionalità per il ripristino dello scorrimento nella navigazione della pagina per mantenere la posizione di scorrimento al caricamento della pagina.
window.history.scrollRestorationpuò essere utilizzato per verificare lo stato del ripristino del rotolo o modificarne lo stato (aggiunta ="auto"/"manual". Auto è il valore predefinito. Cambiarlo in manuale significa che come sviluppatore diventerai proprietario di tutte le modifiche di scorrimento che potrebbero essere necessarie quando un utente attraversa la cronologia dell'app Se necessario, è possibile tenere traccia della posizione di scorrimento mentre si spingono le voci della cronologia con history.pushState ().
---
Ulteriori letture:
- Barra di scorrimento su Wikipedia
- Barra di scorrimento (Windows)
- Il metodo di scorrimento
- Il metodo Scroll - Microsoft Dev Network
- iScroll su Github (indicato nella prima sezione sopra)
- Scrolling e Scrollbars un articolo sull'usabilità di Jakob Nielsen
Esempi
Puoi farlo con un wrapper divche ha il suo overflow nascosto e il divset interno su auto.
Per rimuovere la divbarra di scorrimento interna , è possibile estrarla dalla divfinestra esterna applicando un margine negativo all'interno div. Quindi applica un'imbottitura uguale al div interno in modo che il contenuto rimanga in vista.
HTML
<div class="hide-scroll">
<div class="viewport">
...
</div>
</div>CSS
.hide-scroll {
overflow: hidden;
}
.viewport {
overflow: auto;
/* Make sure the inner div is not larger than the container
* so that we have room to scroll.
*/
max-height: 100%;
/* Pick an arbitrary margin/padding that should be bigger
* than the max width of all the scroll bars across
* the devices you are targeting.
* padding = -margin
*/
margin-right: -100px;
padding-right: 100px;
}height: inheritednel .viewportCSS.
100%è più versatile e fa il lavoro.
-100pxe 100px??
Questo funziona per me con semplici proprietà CSS:
.container {
-ms-overflow-style: none; // Internet Explorer 10+
scrollbar-width: none; // Firefox
}
.container::-webkit-scrollbar {
display: none; // Safari and Chrome
}Per le versioni precedenti di Firefox, utilizzare: overflow: -moz-scrollbars-none;
overflow: -moz-scrollbars-none;rimuovi correttamente la barra di scorrimento, ma rimuovi anche la possibilità di scorrere. Potresti anche solo impostare overflow: hiddensu .container.
-moz-scrollbars-none: "Questa è un'API obsoleta e non è più garantita per funzionare".
Ecco la mia soluzione, che teoricamente copre tutti i browser moderni:
html {
scrollbar-width: none; /* For Firefox */
-ms-overflow-style: none; /* For Internet Explorer and Edge */
}
html::-webkit-scrollbar {
width: 0px; /* For Chrome, Safari, and Opera */
}html può essere sostituito con qualsiasi elemento di cui si desidera nascondere la barra di scorrimento.
Nota : ho scremato le altre 19 risposte per vedere se il codice che sto postando è già stato coperto, e sembra che nessuna risposta singola riassuma la situazione così com'è nel 2019, anche se molti di loro entrano in dettagli eccellenti. Ci scusiamo se questo è stato detto da qualcun altro e me lo sono perso.
Penso di aver trovato una soluzione alternativa per voi ragazzi se siete ancora interessati. Questa è la mia prima settimana, ma ha funzionato per me ...
<div class="contentScroller">
<div class="content">
</div>
</div>
.contentScroller {overflow-y: auto; visibility: hidden;}
.content {visibility: visible;}Se stai cercando una soluzione per nascondere una barra di scorrimento per dispositivi mobili, segui la risposta di Peter !
Ecco un jsfiddle , che utilizza la soluzione seguente per nascondere una barra di scorrimento orizzontale.
.scroll-wrapper{
overflow-x: scroll;
}
.scroll-wrapper::-webkit-scrollbar {
display: none;
}È stato testato su un tablet Samsung con Android 4.0.4 (Ice Cream Sandwich, sia nel browser nativo che in Chrome) e su un iPad con iOS 6 (sia in Safari che in Chrome).
Usa la :overflowproprietà CSS
.noscroll {
width: 150px;
height: 150px;
overflow: auto; /* Or hidden, or visible */
}Ecco alcuni altri esempi:
Come hanno già detto gli altri, usa CSS overflow.
Ma se vuoi ancora che l'utente sia in grado di scorrere quel contenuto (senza che la barra di scorrimento sia visibile) devi usare JavaScript.
Vedi la mia risposta qui per una soluzione: nascondi la barra di scorrimento mentre riesci ancora a scorrere con il mouse / la tastiera
Approccio cross browser per nascondere la barra di scorrimento.
È stato testato su Edge, Chrome, Firefox e Safari
Nascondi la barra di scorrimento mentre riesci ancora a scorrere con la rotellina del mouse!
/* Make parent invisible */
#parent {
visibility: hidden;
overflow: scroll;
}
/* Safari and Chrome specific style. Don't need to make parent invisible, because we can style WebKit scrollbars */
#parent:not(*:root) {
visibility: visible;
}
/* Make Safari and Chrome scrollbar invisible */
#parent::-webkit-scrollbar {
visibility: hidden;
}
/* Make the child visible */
#child {
visibility: visible;
}Se vuoi che lo scorrimento funzioni, prima di nascondere le barre di scorrimento, prendi in considerazione la loro stile. Le versioni moderne di OS X e OS mobili hanno barre di scorrimento che, sebbene poco pratiche per afferrare con il mouse, sono piuttosto belle e neutre.
Per nascondere le barre di scorrimento, una tecnica di John Kurlak funziona bene tranne che per lasciare gli utenti di Firefox che non hanno touchpad senza modo di scorrere a meno che non abbiano un mouse con una rotella, cosa che probabilmente fanno, ma anche allora di solito possono scorrere solo verticalmente .
La tecnica di John utilizza tre elementi:
- Un elemento esterno per mascherare le barre di scorrimento.
- Un elemento centrale per avere le barre di scorrimento.
- E un elemento di contenuto per impostare sia la dimensione dell'elemento centrale che renderlo con barre di scorrimento.
Deve essere possibile impostare le dimensioni degli elementi esterni e di contenuto allo stesso modo che elimini l'utilizzo delle percentuali, ma non riesco a pensare a nient'altro che non funzionerà con il giusto ritocco.
La mia più grande preoccupazione è se tutte le versioni dei browser impostano le barre di scorrimento per rendere visibili i contenuti in overflow. Ho testato con i browser attuali, ma non quelli più vecchi.
Perdonate il mio SASS ; P
%size {
// set width and height
}
.outer {
// mask scrollbars of child
overflow: hidden;
// set mask size
@extend %size;
// has absolutely positioned child
position: relative;
}
.middle {
// always have scrollbars.
// don't use auto, it leaves vertical scrollbar showing
overflow: scroll;
// without absolute, the vertical scrollbar shows
position: absolute;
}
// prevent text selection from revealing scrollbar, which it only does on
// some webkit based browsers.
.middle::-webkit-scrollbar {
display: none;
}
.content {
// push scrollbars behind mask
@extend %size;
}analisi
OS X è 10.6.8. Windows è Windows 7.
- Firefox 32.0 Barre di scorrimento nascoste. I tasti freccia non scorrono, anche dopo aver fatto clic per mettere a fuoco, ma lo fanno la rotellina del mouse e due dita sul trackpad. OS X e Windows.
- Chrome 37.0 Barre di scorrimento nascoste. I tasti freccia funzionano dopo aver fatto clic per mettere a fuoco. Rotellina del mouse e trackpad. OS X e Windows.
- Barre di scorrimento di Internet Explorer 11 nascoste. I tasti freccia funzionano dopo aver fatto clic per mettere a fuoco. La rotellina del mouse funziona. Finestre.
- Safari 5.1.10 Barre di scorrimento nascoste. I tasti freccia funzionano dopo aver fatto clic per mettere a fuoco. Rotellina del mouse e trackpad. OS X.
- Android 4.4.4 e 4.1.2. Barre di scorrimento nascoste. Touch scrolling works. Ho provato in Chrome 37.0, Firefox 32.0 e HTMLViewer su 4.4.4 (qualunque cosa sia). In HTMLViewer, la pagina ha le dimensioni del contenuto mascherato e può anche essere fatta scorrere! Lo scorrimento interagisce in modo accettabile con lo zoom della pagina.
@mixin{}, dovresti farlo %size{}nei selettori CSS, chiamare @extend %size;. I mixin vengono generalmente utilizzati quando si inseriscono variabili per restituire un risultato. I segnaposto (aka @extend) sono pensati per un semplice codice ripetuto come questo - dove non è necessaria alcuna "funzione".
Ho solo pensato di far notare a chiunque leggesse questa domanda che l'impostazione overflow: hidden(o l'overflow-y) bodysull'elemento non mi nascondeva le barre di scorrimento.
Ho dovuto usare l' htmlelemento.
Ho scritto una versione di WebKit con alcune opzioni come auto hide , little version , scroll only-y o only-x :
._scrollable{
@size: 15px;
@little_version_ratio: 2;
@scrollbar-bg-color: rgba(0,0,0,0.15);
@scrollbar-handler-color: rgba(0,0,0,0.15);
@scrollbar-handler-color-hover: rgba(0,0,0,0.3);
@scrollbar-coner-color: rgba(0,0,0,0);
overflow-y: scroll;
overflow-x: scroll;
-webkit-overflow-scrolling: touch;
width: 100%;
height: 100%;
&::-webkit-scrollbar {
background: none;
width: @size;
height: @size;
}
&::-webkit-scrollbar-track {
background-color:@scrollbar-bg-color;
border-radius: @size;
}
&::-webkit-scrollbar-thumb {
border-radius: @size;
background-color:@scrollbar-handler-color;
&:hover{
background-color:@scrollbar-handler-color-hover;
}
}
&::-webkit-scrollbar-corner {
background-color: @scrollbar-coner-color;
}
&.little{
&::-webkit-scrollbar {
background: none;
width: @size / @little_version_ratio;
height: @size / @little_version_ratio;
}
&::-webkit-scrollbar-track {
border-radius: @size / @little_version_ratio;
}
&::-webkit-scrollbar-thumb {
border-radius: @size / @little_version_ratio;
}
}
&.autoHideScrollbar{
overflow-x: hidden;
overflow-y: hidden;
&:hover{
overflow-y: scroll;
overflow-x: scroll;
-webkit-overflow-scrolling: touch;
&.only-y{
overflow-y: scroll !important;
overflow-x: hidden !important;
}
&.only-x{
overflow-x: scroll !important;
overflow-y: hidden !important;
}
}
}
&.only-y:not(.autoHideScrollbar){
overflow-y: scroll !important;
overflow-x: hidden !important;
}
&.only-x:not(.autoHideScrollbar){
overflow-x: scroll !important;
overflow-y: hidden !important;
}
}Copia questo codice CSS nel codice cliente per nascondere la barra di scorrimento:
<style>
::-webkit-scrollbar {
display: none;
}
#element::-webkit-scrollbar {
display: none;
}
</style>Il mio HTML è così:
<div class="container">
<div class="content">
</div>
</div>Aggiungi questo al tuo punto in divcui desideri nascondere la barra di scorrimento:
.content {
position: absolute;
right: -100px;
overflow-y: auto;
overflow-x: hidden;
height: 75%; /* This can be any value of your choice */
}E aggiungi questo al contenitore
.container {
overflow-x: hidden;
max-height: 100%;
max-width: 100%;
}Per disabilitare la barra di scorrimento verticale, basta aggiungere overflow-y:hidden;.
Scopri di più: overflow .
La mia risposta scorrerà anche quando overflow:hidden;, usando jQuery:
Ad esempio, scorrere in orizzontale con la rotellina del mouse:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type='text/javascript' src='/js/jquery.mousewheel.min.js'></script>
<script type="text/javascript">
$(function() {
$("YourSelector").mousewheel(function(event, delta) {
this.scrollLeft -= (delta * 30);
event.preventDefault();
});
});
</script>Credo che tu possa manipolarlo con l' overflowattributo CSS, ma hanno un supporto limitato per il browser. Una fonte ha detto che era Internet Explorer 5 (e versioni successive), Firefox 1.5 (e versioni successive) e Safari 3 (e versioni successive), forse abbastanza per i tuoi scopi.
Scorrimento, Scorrimento, Scorrimento ha una buona discussione.
Ho provato di tutto e quello che ha funzionato meglio per la mia soluzione è stato quello di mostrare sempre la barra di scorrimento verticale, quindi aggiungere un margine negativo per nasconderlo.
body {
overflow-y: scroll;
margin-right: -20px;
}