Ocultar la barra de desplazamiento en una página HTML
Respuestas:
Establecer overflow: hidden;en la etiqueta del cuerpo de esta manera:
<style type="text/css">
body {
overflow: hidden;
}
</style>El código anterior oculta tanto la barra de desplazamiento horizontal como la vertical.
Si desea ocultar solo la barra de desplazamiento vertical , use overflow-y:
<style type="text/css">
body {
overflow-y: hidden;
}
</style>Y si desea ocultar solo la barra de desplazamiento horizontal , use overflow-x:
<style type="text/css">
body {
overflow-x: hidden;
}
</style>Nota: También deshabilitará la función de desplazamiento. Consulte las respuestas a continuación si solo desea ocultar la barra de desplazamiento, pero no la función de desplazamiento.
hiddendesplazamiento, funcionará con una rueda de desplazamiento del mouse. En Firefox, el desplazamiento no funcionará con una rueda de desplazamiento del mouse, me tomó un tiempo resolver esto.
overflow: hiddendeshabilita el desplazamiento. Si alguien quiere ocultar la barra de desplazamiento, entonces presumiblemente consideran innecesario el control porque no hay contenido para desplazarse en primer lugar . O tal vez simplemente no quieren permitir el desplazamiento por completo .
WebKit admite pseudo elementos de barra de desplazamiento que pueden ocultarse con reglas CSS estándar:
#element::-webkit-scrollbar {
display: none;
}Si desea que todas las barras de desplazamiento estén ocultas, use
::-webkit-scrollbar {
display: none;
}No estoy seguro acerca de la restauración, esto funcionó, pero podría haber una forma correcta de hacerlo:
::-webkit-scrollbar {
display: block;
}Por supuesto, siempre puede usar width: 0, que luego se puede restaurar fácilmente width: auto, pero no soy fanático de abusar widthde los ajustes de visibilidad.
Firefox 64 ahora admite la propiedad experimental de ancho de barra de desplazamiento de forma predeterminada (63 requiere que se establezca un indicador de configuración). Para ocultar la barra de desplazamiento en Firefox 64:
#element {
scrollbar-width: none;
}Para ver si su navegador actual admite el pseudo elemento o scrollbar-width, intente este fragmento:
(Tenga en cuenta que esta no es realmente una respuesta correcta a la pregunta, porque también oculta las barras horizontales, pero eso es lo que estaba buscando cuando Google me señaló aquí, así que pensé que lo publicaría de todos modos).
Sí, más o menos ...
Cuando hace la pregunta, "¿Se pueden eliminar las barras de desplazamiento de un navegador de alguna manera, en lugar de simplemente ocultas o camufladas", todos dirán "No es posible" porque no es posible eliminar las barras de desplazamiento de todos los navegadores en un de manera compatible y compatible, y luego está todo el argumento de la usabilidad.
Sin embargo, es posible evitar que el navegador tenga la necesidad de generar y mostrar barras de desplazamiento si no permite que su página web se desborde.
Esto solo significa que tenemos que sustituir proactivamente el mismo comportamiento que el navegador normalmente haría por nosotros y decirle al navegador gracias pero no gracias amigo. En lugar de tratar de eliminar las barras de desplazamiento (que todos sabemos que no es posible) podemos evitar el desplazamiento (perfectamente factible) y desplazarnos dentro de los elementos que creamos y tener más control sobre ellos.
Crea un div con desbordamiento oculto. Detecta cuándo el usuario intenta desplazarse, pero no puede hacerlo porque hemos deshabilitado la capacidad de los navegadores para desplazarse con desbordamiento: oculto ... y, en su lugar, mueve el contenido hacia arriba usando JavaScript cuando esto ocurre. De este modo, creamos nuestro propio desplazamiento sin el desplazamiento predeterminado del navegador o utilizamos un complemento como iScroll .
---
Por el bien de ser minucioso; todas las formas específicas del proveedor de manipular barras de desplazamiento:
Internet Explorer 5.5+
* Estas propiedades nunca fueron parte de la especificación CSS, ni fueron aprobadas ni prefijadas por el proveedor, pero funcionan en Internet Explorer y Konqueror. También se pueden configurar localmente en la hoja de estilo del usuario para cada aplicación. En Internet Explorer lo encuentra en la pestaña "Accesibilidad", en Konqueror en la pestaña "Hojas de estilo".
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 partir de Internet Explorer 8, estas propiedades tenían el prefijo de proveedor de Microsoft, pero W3C nunca las aprobó .
-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-colorMás detalles sobre Internet Explorer
Internet Explorer pone a scrolldisposición lo que establece si deshabilitar o no las barras de desplazamiento; También se puede utilizar para obtener el valor de la posición de las barras de desplazamiento.
Con Microsoft Internet Explorer 6 y versiones posteriores, cuando usa la !DOCTYPEdeclaración para especificar el modo compatible con los estándares, este atributo se aplica al elemento HTML. Cuando no se especifica el modo compatible con los estándares, como en las versiones anteriores de Internet Explorer, este atributo se aplica al BODYelemento, NO al HTMLelemento.
También vale la pena señalar que cuando se trabaja con .NET, la clase ScrollBar System.Windows.Controls.Primitivesen el marco de presentación es responsable de representar las barras de desplazamiento.
http://msdn.microsoft.com/en-us/library/ie/ms534393(v=vs.85).aspx
- MSDN Propiedades básicas de la IU
- W3C. Acerca de las propiedades de la barra de desplazamiento no estándar
- MSDN Clase .NET ScrollBar
WebKit
Las extensiones de WebKit relacionadas con la personalización de la barra de desplazamiento son:
::-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 */
Estos se pueden combinar con pseudo-selectores adicionales:
:horizontal- La pseudo-clase horizontal se aplica a cualquier pieza de la barra de desplazamiento que tenga una orientación horizontal.:vertical- La pseudo-clase vertical se aplica a cualquier pieza de la barra de desplazamiento que tenga una orientación vertical.:decrement- La pseudoclase de disminución se aplica a botones y piezas de seguimiento. Indica si el botón o la pieza de la pista disminuirá la posición de la vista cuando se use (por ejemplo, arriba en una barra de desplazamiento vertical, izquierda en una barra de desplazamiento horizontal).:increment- La pseudoclase de incremento se aplica a botones y piezas de seguimiento. Indica si un botón o pieza de pista incrementará la posición de la vista cuando se use (por ejemplo, hacia abajo en una barra de desplazamiento vertical, hacia la derecha en una barra de desplazamiento horizontal).:start- La pseudoclase de inicio se aplica a botones y piezas de seguimiento. Indica si el objeto se coloca antes del pulgar.:end- La pseudo-clase final se aplica a botones y piezas de seguimiento. Indica si el objeto se coloca después del pulgar.:double-button- La pseudoclase de doble botón se aplica a botones y piezas de seguimiento. Se utiliza para detectar si un botón es parte de un par de botones que están juntos en el mismo extremo de una barra de desplazamiento. Para las piezas de la pista indica si la pieza de la pista tiene un par de botones.:single-button- La pseudoclase de un solo botón se aplica a botones y piezas de seguimiento. Se utiliza para detectar si un botón está solo al final de una barra de desplazamiento. Para las piezas de pista, indica si la pieza de pista tiene un botón singleton.:no-button- Se aplica a las piezas de la pista e indica si la pieza de la pista corre o no hasta el borde de la barra de desplazamiento, es decir, no hay ningún botón en ese extremo de la pista.:corner-present- Se aplica a todas las piezas de la barra de desplazamiento e indica si existe o no una esquina de la barra de desplazamiento.:window-inactive- Se aplica a todas las piezas de la barra de desplazamiento e indica si la ventana que contiene la barra de desplazamiento está activa o no. (En noches recientes, esta pseudo-clase ahora también se aplica a :: selection. Planeamos extenderla para que funcione con cualquier contenido y proponerla como una nueva pseudo-clase estándar).
Ejemplos de estas combinaciones.
::-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 */ }Más detalles sobre Chrome
addWindowScrollHandler public static HandlerRegistration addWindowScrollHandler (Window.ScrollHandler handler)
Agrega un controlador Window.ScrollEvent Parámetros: controlador - el controlador Devuelve: devuelve el registro del controlador [ fuente ] ( http://www.gwtproject.org/javadoc/latest/com/google/gwt/user/client/Window.html# addWindowScrollHandler (com.google.gwt.user.client.Window.ScrollHandler) )
Mozilla
Mozilla tiene algunas extensiones para manipular las barras de desplazamiento, pero se recomienda no usarlas.
-moz-scrollbars-noneRecomiendan usar overflow: oculto en lugar de esto.-moz-scrollbars-horizontalSimilar a overflow-x-moz-scrollbars-verticalSimilar a overflow-y-moz-hidden-unscrollableSolo funciona internamente dentro de la configuración de un perfil de usuario. Deshabilita el desplazamiento de elementos raíz XML y deshabilita el uso de teclas de flecha y la rueda del mouse para desplazarse por las páginas web.Documentos de desarrollador de Mozilla sobre 'Desbordamiento'
Más detalles sobre Mozilla
Por lo que sé, esto no es realmente útil, pero vale la pena señalar que el atributo que controla si las barras de desplazamiento se muestran o no en Firefox es ( enlace de referencia ):
- Atributo: barras de desplazamiento
- Tipo: nsIDOMBarProp
- Descripción: El objeto que controla si las barras de desplazamiento se muestran o no en la ventana. Este atributo es "reemplazable" en JavaScript. Solo lectura
Por último, pero no menos importante, el relleno es como magia.
Como se ha mencionado anteriormente en algunas otras respuestas, aquí hay una ilustración que se explica por sí misma suficientemente.
Leccion de historia
Solo porque tengo curiosidad, quería aprender sobre el origen de las barras de desplazamiento, y estas son las mejores referencias que encontré.
- 10 invenciones sobre desplazamiento y barras de desplazamiento
- https://tools.ietf.org/id/draft-hellstrom-textpreview-02.txt
- https://tools.ietf.org/id/draft-mrose-blocks-service-01.txt
Diverso
En un borrador de especificación HTML5, el seamlessatributo se definió para evitar que aparezcan barras de desplazamiento en iFrames para que puedan mezclarse con el contenido circundante en una página . Aunque este elemento no aparece en la última revisión.
El scrollbarobjeto BarProp es un elemento secundario del windowobjeto y representa el elemento de la interfaz de usuario que contiene un mecanismo de desplazamiento o algún concepto de interfaz similar. window.scrollbars.visiblevolverá truesi las barras de desplazamiento son visibles.
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();
// TruncatedLa API de historial también incluye características para la restauración de desplazamiento en la navegación de la página para mantener la posición de desplazamiento en la carga de la página.
window.history.scrollRestorationse puede usar para verificar el estado de la restauración de desplazamiento o cambiar su estado (anexar ="auto"/"manual". Automático es el valor predeterminado. Cambiarlo a manual significa que usted, como desarrollador, tomará posesión de los cambios de desplazamiento que puedan ser necesarios cuando un usuario recorre el historial de la aplicación Si lo necesita, puede realizar un seguimiento de la posición de desplazamiento mientras empuja las entradas del historial con history.pushState ().
---
Otras lecturas:
- Barra de desplazamiento en Wikipedia
- Barra de desplazamiento (Windows)
- El método de desplazamiento
- El método de desplazamiento - Microsoft Dev Network
- iScroll en Github (mencionado en la primera sección anterior)
- Desplazamiento y barras de desplazamiento un artículo sobre usabilidad por Jakob Nielsen
Ejemplos
Puede lograr esto con un contenedor divque tiene su desbordamiento oculto y el divconjunto interno configurado como auto.
Para eliminar la divbarra de desplazamiento del interior , puede sacarlo de la divventana del exterior aplicando un margen negativo al interior div. Luego aplique el mismo relleno al div interno para que el contenido permanezca a la 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: inheriteden el .viewportCSS.
100%Es más versátil y hace el trabajo.
-100pxy 100px??
Esto funciona para mí con propiedades CSS simples:
.container {
-ms-overflow-style: none; // Internet Explorer 10+
scrollbar-width: none; // Firefox
}
.container::-webkit-scrollbar {
display: none; // Safari and Chrome
}Para versiones anteriores de Firefox, use: overflow: -moz-scrollbars-none;
overflow: -moz-scrollbars-none;entonces elimina con éxito la barra de desplazamiento, pero también elimina la capacidad de desplazamiento. Es lo mismo que establecer overflow: hiddenel .container.
-moz-scrollbars-none: "Esta es una API obsoleta y ya no se garantiza que funcione".
Aquí está mi solución, que teóricamente cubre todos los navegadores modernos:
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 se puede reemplazar con cualquier elemento del que desee ocultar la barra de desplazamiento.
Nota : He leído las otras 19 respuestas para ver si el código que estoy publicando ya ha sido cubierto, y parece que no hay una respuesta única que resuma la situación en 2019, aunque muchas de ellas entran en detalles excelentes. Disculpas si alguien más lo ha dicho y me lo perdí.
Creo que encontré una solución para ustedes si aún están interesados. Esta es mi primera semana, pero funcionó para mí ...
<div class="contentScroller">
<div class="content">
</div>
</div>
.contentScroller {overflow-y: auto; visibility: hidden;}
.content {visibility: visible;}Si está buscando una solución para ocultar una barra de desplazamiento para dispositivos móviles, ¡siga la respuesta de Peter !
Aquí hay un jsfiddle , que usa la solución a continuación para ocultar una barra de desplazamiento horizontal.
.scroll-wrapper{
overflow-x: scroll;
}
.scroll-wrapper::-webkit-scrollbar {
display: none;
}Fue probado en una tableta Samsung con Android 4.0.4 (Ice Cream Sandwich, tanto en el navegador nativo como en Chrome) y en un iPad con iOS 6 (tanto en Safari como en Chrome).
Use la :overflowpropiedad CSS
.noscroll {
width: 150px;
height: 150px;
overflow: auto; /* Or hidden, or visible */
}Aquí hay algunos ejemplos más:
Como las otras personas ya dijeron, usa CSS overflow.
Pero si aún desea que el usuario pueda desplazar ese contenido (sin que la barra de desplazamiento esté visible), debe usar JavaScript.
Vea mi respuesta aquí para una solución: Ocultar la barra de desplazamiento mientras aún puedo desplazarme con el mouse / teclado
Enfoque cruzado del navegador para ocultar la barra de desplazamiento.
Fue probado en Edge, Chrome, Firefox y Safari
¡Oculta la barra de desplazamiento mientras aún puedes desplazarte con la rueda 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;
}Si desea que el desplazamiento funcione, antes de ocultar las barras de desplazamiento, considere diseñarlas. Las versiones modernas de OS X y OS móviles tienen barras de desplazamiento que, aunque no son prácticas para agarrar con un mouse, son bastante hermosas y neutrales.
Para ocultar las barras de desplazamiento, una técnica de John Kurlak funciona bien, excepto para dejar a los usuarios de Firefox que no tienen paneles táctiles sin forma de desplazamiento a menos que tengan un mouse con una rueda, lo cual probablemente sí, pero incluso así, generalmente solo pueden desplazarse verticalmente .
La técnica de John utiliza tres elementos:
- Un elemento externo para enmascarar las barras de desplazamiento.
- Un elemento central para tener las barras de desplazamiento.
- Y un elemento de contenido para establecer el tamaño del elemento central y hacer que tenga barras de desplazamiento.
Debe ser posible establecer el tamaño de los elementos externos y de contenido de la misma forma, lo que elimina el uso de porcentajes, pero no puedo pensar en otra cosa que no funcione con los ajustes correctos.
Mi mayor preocupación es si todas las versiones de los navegadores establecen barras de desplazamiento para hacer visible el contenido desbordado visible. He probado en los navegadores actuales, pero no en los anteriores.
Perdón mi 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;
}Pruebas
OS X es 10.6.8. Windows es Windows 7.
- Firefox 32.0 Barras de desplazamiento ocultas. Las teclas de flecha no se desplazan, incluso después de hacer clic para enfocar, pero la rueda del mouse y dos dedos en el panel táctil sí. OS X y Windows.
- Chrome 37.0 Barras de desplazamiento ocultas. Las teclas de flecha funcionan después de hacer clic para enfocar. La rueda del mouse y el trackpad funcionan. OS X y Windows.
- Internet Explorer 11 Barras de desplazamiento ocultas. Las teclas de flecha funcionan después de hacer clic para enfocar. La rueda del mouse funciona. Windows
- Safari 5.1.10 Barras de desplazamiento ocultas. Las teclas de flecha funcionan después de hacer clic para enfocar. La rueda del mouse y el trackpad funcionan. OS X.
- Android 4.4.4 y 4.1.2. Barras de desplazamiento ocultas. El desplazamiento táctil funciona. Probado en Chrome 37.0, Firefox 32.0 y HTMLViewer en 4.4.4 (sea lo que sea). En HTMLViewer, la página tiene el tamaño del contenido enmascarado y también puede desplazarse. El desplazamiento interactúa de manera aceptable con el zoom de la página.
@mixin{}hacerlo, %size{}entonces, en los selectores css, llame @extend %size;. Los mixins se usan típicamente cuando se introducen variables para devolver un resultado. Los marcadores de posición (también conocidos como @extend) están destinados a un código simple y repetido como este, donde no se necesita "función".
Solo pensé en señalarle a cualquiera que lea esta pregunta que la configuración overflow: hidden(o overflow-y) en el bodyelemento no ocultó las barras de desplazamiento para mí.
Tuve que usar el htmlelemento.
Escribí una versión de WebKit con algunas opciones como ocultar automáticamente , versión pequeña , desplazarse solo-y , o solo-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;
}
}Copie este código CSS al código del cliente para ocultar la barra de desplazamiento:
<style>
::-webkit-scrollbar {
display: none;
}
#element::-webkit-scrollbar {
display: none;
}
</style>Mi HTML es así:
<div class="container">
<div class="content">
</div>
</div>Agregue esto a su lugar divdonde desea ocultar la barra de desplazamiento:
.content {
position: absolute;
right: -100px;
overflow-y: auto;
overflow-x: hidden;
height: 75%; /* This can be any value of your choice */
}Y agregue esto al contenedor
.container {
overflow-x: hidden;
max-height: 100%;
max-width: 100%;
}Para deshabilitar la barra de desplazamiento vertical, simplemente agregue overflow-y:hidden; .
Encuentre más sobre esto: desbordamiento .
Mi respuesta se desplazará incluso cuando overflow:hidden; , usando jQuery:
Por ejemplo, desplácese horizontalmente con la rueda 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>Creo que puede manipularlo con el overflowatributo CSS, pero tienen una compatibilidad limitada con el navegador. Una fuente dijo que era Internet Explorer 5 (y posterior), Firefox 1.5 (y posterior) y Safari 3 (y posterior), tal vez lo suficiente para sus propósitos.
Desplazamiento, desplazamiento, desplazamiento tiene una buena discusión.
Lo intenté todo y lo que funcionó mejor para mi solución fue tener siempre la barra de desplazamiento vertical y luego agregar un margen negativo para ocultarlo.
body {
overflow-y: scroll;
margin-right: -20px;
}