it-swarm-es.com

Ocultar la barra de desplazamiento, pero al mismo tiempo se puede desplazar

Quiero poder desplazarme por toda la página, pero sin que se muestre la barra de desplazamiento.

En Google Chrome es:

::-webkit-scrollbar { 
    display: none; 
}

Pero Mozilla Firefox e Internet Explorer no parecen funcionar así.

También probé esto en CSS:

overflow: hidden;

Eso oculta la barra de desplazamiento, pero ya no puedo desplazarme.

¿Hay alguna forma en que pueda eliminar la barra de desplazamiento mientras puedo desplazarme por toda la página? Con solo CSS o HTML, por favor.

868
Oussama Dooby

Sólo una prueba que está funcionando bien.

#parent{
    height: 100%;
    width: 100%;
    overflow: hidden;
}

#child{
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    padding-right: 17px; /* Increase/decrease this value for cross-browser compatibility */
    box-sizing: content-box; /* So the width will be 100% + 17px */
}

Trabajando Fiddle

JavaScript:

Dado que el ancho de la barra de desplazamiento difiere en diferentes navegadores, es mejor manejarlo con JavaScript. Si lo hace Element.offsetWidth - Element.clientWidth, se mostrará el ancho exacto de la barra de desplazamiento.

JavaScript Working Fiddle

o

Utilizando Position: absolute,

#parent{
    height: 100%;
    width: 100%;
    overflow: hidden;
    position: relative;
}

#child{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: -17px; /* Increase/Decrease this value for cross-browser compatibility */
    overflow-y: scroll;
}

Trabajando Fiddle

JavaScript Working Fiddle

Info:

Basándome en esta respuesta, creé un complemento de desplazamiento simple . Espero que esto ayude a alguien.

654
Mr_Green

Es fácil en WebKit, con un estilo opcional:

html {
    overflow: scroll;
    overflow-x: hidden;
}
::-webkit-scrollbar {
    width: 0px;  /* Remove scrollbar space */
    background: transparent;  /* Optional: just make scrollbar invisible */
}
/* Optional: show position indicator in red */
::-webkit-scrollbar-thumb {
    background: #FF0000;
}
284
Anirban Bhui

Esto me funciona con propiedades CSS simples:

.container {
    -ms-overflow-style: none;  // IE 10+
    scrollbar-width: none;  // Firefox
}
.container::-webkit-scrollbar { 
    display: none;  // Safari and Chrome
}

ACTUALIZADO: agregó la nueva propiedad scrollbar-width para Firefox.

Para versiones anteriores de Firefox, use: overflow: -moz-scrollbars-none;

151
Hristo Eftimov

ACTUALIZACIÓN: Firefox ahora permite ocultar barras de desplazamiento con CSS, por lo que todos los principales navegadores ahora están cubiertos (Chrome, Firefox, IE, Safari, etc.).

Simplemente aplique el siguiente CSS al elemento del que desea eliminar las barras de desplazamiento:

.container {
    overflow-y: scroll;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;  /* IE 10+ */
}
.container::-webkit-scrollbar { /* WebKit */
    width: 0;
    height: 0;
}

Esta es la solución de navegador cruzado menos hacky que actualmente conozco. Echa un vistazo a la demo.


RESPUESTA ORIGINAL:

Aquí hay otra forma que no se ha mencionado todavía. Es realmente simple y solo involucra dos divs y CSS. No se necesita JavaScript o CSS propietario y funciona en todos los navegadores. No requiere establecer explícitamente el ancho del contenedor, ya sea por lo que es fluido.

Este método utiliza un margen negativo para mover la barra de desplazamiento fuera del padre y luego la misma cantidad de relleno para empujar el contenido a su posición original. La técnica funciona para desplazamiento vertical, horizontal y bidireccional.

Población:

Código de ejemplo para la versión vertical:

HTML:

<div class="parent">
  <div class="child">
    Your content.
  </div>
</div>

CSS:

.parent{
  width: 400px;
  height: 200px;
  border: 1px solid #aaa;
  overflow: hidden;
}
.child{
  height: 100%;
  margin-right: -50px; /* maximum width of scrollbar */
  padding-right: 50px; /* maximum width of scrollbar */
  overflow-y: scroll;
}
124
Richrd

Utilizar:

<div style='overflow:hidden; width:500px;'>
   <div style='overflow:scroll; width:508px'>
      My scroll-able area
   </div>
</div>

Este es un truco para superponer un poco la barra de desplazamiento con un div superpuesto que no tiene ninguna barra de desplazamiento:

::-webkit-scrollbar {
    display: none;
}

Esto es solo para WebKit browsers ... O puede usar contenido CSS específico del navegador (si hay alguno en el futuro). Cada navegador podría tener una propiedad diferente y específica para sus respectivas barras.

Para el uso de Microsoft Edge: -ms-overflow-style: -ms-autohiding-scrollbar; o -ms-overflow-style: none; como por MSDN .

No hay equivalente para Firefox. Aunque hay un complemento jQuery para lograr esto, http://manos.malihu.gr/tuts/jquery_custom_scrollbar.html

70
Arpit Singh

Esta respuesta no incluye el código, así que aquí está la solución de page :

De acuerdo con la página, este enfoque no necesita conocer el ancho de la barra de desplazamiento antes de tiempo para que funcione y la solución funciona para todos los navegadores también, y se puede ver aquí .

Lo bueno es que no está obligado a usar el relleno o las diferencias de ancho para ocultar la barra de desplazamiento.

Esto también es zoom seguro. Las soluciones de relleno/ancho muestran la barra de desplazamiento cuando se reduce al mínimo.

Corrección de Firefox: http://jsbin.com/mugiqoveko/1/edit?output

.element,
.outer-container {
  width: 200px;
  height: 200px;
}
.outer-container {
  border: 5px solid purple;
  position: relative;
  overflow: hidden;
}
.inner-container {
  position: absolute;
  left: 0;
  overflow-x: hidden;
  overflow-y: scroll;
  padding-right: 150px;
}
.inner-container::-webkit-scrollbar {
  display: none;
}
<div class="outer-container">
  <div class="inner-container">
    <div class="element">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vehicula quam nibh, eu tristique tellus dignissim quis. Integer condimentum ultrices elit ut mattis. Praesent rhoncus tortor metus, nec pellentesque enim mattis nec. Nulla vitae turpis ut
      dui consectetur pellentesque quis vel est. Curabitur rutrum, mauris ut mollis lobortis, sem est congue lectus, ut sodales nunc leo a libero. Cras quis sapien in mi fringilla tempus condimentum quis velit. Aliquam id aliquam arcu. Morbi tristique
      aliquam rutrum. Duis tincidunt, orci suscipit cursus molestie, purus nisi pharetra dui, tempor dignissim felis turpis in mi. Vivamus ullamcorper arcu sit amet mauris egestas egestas. Vestibulum turpis neque, condimentum a tincidunt quis, molestie
      vel justo. Sed molestie nunc dapibus arcu feugiat, ut sollicitudin metus sagittis. Aliquam a volutpat sem. Quisque id magna ultrices, lobortis dui eget, pretium libero. Curabitur aliquam in ante eu ultricies.
    </div>
  </div>
</div>
33
Timo Kähkönen

Simplemente use las siguientes tres líneas y su problema se resolverá:

#liaddshapes::-webkit-scrollbar {
    width: 0 !important;
}

Donde liaddshapes es el nombre del div donde viene scroll.

17
Innodel

HTML:

<div class="parent">
    <div class="child">
    </div>
</div>

CSS:

.parent{
    position: relative;
    width: 300px;
    height: 150px;
    border: 1px solid black;
    overflow: hidden;
}

.child {
    height: 150px;   
    width: 318px;
    overflow-y: scroll;
}

Aplicar CSS en consecuencia.

Compruébelo aquí (probado en Internet Explorer y Firefox).

9
Mischa

A partir del 11 de diciembre de 2018 (Firefox 64 y superior), la respuesta a esta pregunta es muy simple, ya que Firefox 64+ ahora implementa la especificación de CSS Scrollbar Styling .

Solo usa el siguiente CSS:

scrollbar-width: none;

Firefox 64 release note link aquí .

7
Chris

Utilizar:

#subparent{
    overflow: hidden;
    width: 500px;
    border: 1px rgba(0,0,0,1.00) solid;
}

#parent{
    width: 515px;
    height: 300px;
    overflow-y: auto;
    overflow-x: hidden;
    opacity: 10%;
}

#child{
    width: 511px;
    background-color: rgba(123, 8, 10, 0.42);
}

<body>
    <div id="subparent">
        <div id="parent">
            <div id="child">
                <!- code here for scroll ->
            </div>
        </div>
     </div>
 </body>
7
Owais

Utilizar

function reloadScrollBars() {
    document.documentElement.style.overflow = 'auto';  // Firefox, Chrome
    document.body.scroll = "yes"; // Internet Explorer only
}

function unloadScrollBars() {
    document.documentElement.style.overflow = 'hidden';  // firefox, chrome
    document.body.scroll = "no"; // Internet Explorer only
}

Llame a estas funciones para cualquier punto que desee cargar, descargar o volver a cargar las barras de desplazamiento. Todavía es desplazable en Chrome como lo probé en Chrome, pero no estoy seguro de los otros navegadores.

6
user43353

Mi problema: no quiero ningún estilo en mi html, quiero directamente mi cuerpo desplazable sin barra de desplazamiento, y solo un desplazamiento vertical, trabajando con css-grids para cualquier tamaño de pantalla.

El tamaño de caja valor de relleno de impacto o margen de soluciones, funcionan con cuadro de tamaño: cuadro de contenido.

Todavía necesito la directiva "-moz-scrollbars-none", y como gdoron y Mr_Green, tuve que ocultar la barra de desplazamiento. Intenté -moz-transform y -moz-padding-start para impactar solo en Firefox, pero había efectos secundarios de respuesta que necesitaban mucho trabajo.

Esta solución funciona para el contenido del cuerpo html con el estilo "display: grid" y responde.

/* hide html and body scroll bar in css-grid context */
html,body{
  position: static; /* or relative or fixed ... */
  box-sizing: content-box; /* important for hidding scrollbar */
  display: grid; /* for css-grid */
  /* full screen */
  width: 100vw;
  min-width: 100vw;
  max-width: 100vw;
  height: 100vh;
  min-height: 100vh;
  max-height: 100vh;
  margin: 0;
  padding: 0;
}
html{
  -ms-overflow-style: none;  /* IE 10+ */
  overflow: -moz-scrollbars-none; /* should hide scroll bar */
}
/* no scroll bar for Safari and Chrome */
html::-webkit-scrollbar,
body::-webkit-scrollbar{
  display: none; /*  might be enought */
  background: transparent;
  visibility: hidden;
  width: 0px;
}
/* Firefox only workaround */
@-moz-document url-prefix() {
  /* Make html with overflow hidden */
  html{
    overflow: hidden;
  }
  /* Make body max height auto */
  /* set right scroll bar out the screen  */
  body{
    /* enable scrolling content  */
    max-height: auto;
    /* 100vw +15px : trick to set the scroll bar out the screen */
    width: calc(100vw + 15px);
    min-width: calc(100vw + 15px);
    max-width: calc(100vw + 15px);
    /* set back the content inside the screen */
    padding-right: 15px;
  }
}
body{
  /* allow vertical scroll */
  overflow-y: scroll;
}
5
Lucile Fievet

En los navegadores modernos puede utilizar wheel eventhttps://developer.mozilla.org/en-US/docs/Web/Events/wheel

// content is the element you want to apply the wheel scroll effect
content.addEventListener('wheel', function(e) {
  const step = 100; // how many pixels to scroll
  if(e.deltaY > 0 ) // scroll down
     content.scrollTop += step;
  else //scroll up
     content.scrollTop -= step;
});
5
Doua Beri

Agregar el relleno a una div interna, como en la respuesta actualmente aceptada, no funcionará si por alguna razón quiere usar box-model: border-box.

Lo que funciona en ambos casos es aumentar el ancho de la div interna al 100% más el ancho de la barra de desplazamiento (asumiendo que overflow: hidden en el div exterior).

Por ejemplo, en CSS:

.container2 {
    width: calc(100% + 19px);
}

En Javascript, navegador cruzado:

var child = document.getElementById('container2');
var addWidth = child.offsetWidth - child.clientWidth + "px";
child.style.width = 'calc(100% + ' + addWidth + ')';
4
herman

Así es como lo hago para el desplazamiento horizontal, solo CSS y funciona bien con marcos como bootstrap/col- *. Solo necesita 2 div adicionales y el padre con un ancho o conjunto de ancho máximo:

Puede seleccionar el texto para desplazarlo o desplazarlo con los dedos si tiene una pantalla táctil.

.overflow-x-scroll-no-scrollbar {overflow:hidden;}
.overflow-x-scroll-no-scrollbar div {
  overflow-x:hidden;
  margin-bottom:-17px;
  overflow-y:hidden;
  width:100%;
}
.overflow-x-scroll-no-scrollbar div * {
  overflow-x:auto;
  width:100%;
  padding-bottom:17px;
  white-space: nowrap; 
  cursor:pointer
}

/* the following classes are only here to make the example looks nicer */
.row {width:100%}
.col-xs-4 {width:33%;float:left}
.col-xs-3 {width:25%;float:left}
.bg-gray{background-color:#DDDDDD}
.bg-orange{background-color:#FF9966}
.bg-blue{background-color:#6699FF}
.bg-orange-light{background-color:#FFAA88}
.bg-blue-light{background-color:#88AAFF}
<html><body>
  <div class="row">
    <div class="col-xs-4 bg-orange">Column 1</div>
    <div class="col-xs-3 bg-gray">Column 2</div>
    <div class="col-xs-4 bg-blue">Column 3</div>
  </div>
  <div class="row">
    <div class="col-xs-4 bg-orange-light">Content 1</div>
    <div class="col-xs-3 overflow-x-scroll-no-scrollbar">
      <div>
        <div>This content too long for the container, so it needs to be hidden but scrollable without scrollbars</div>
      </div>
    </div>
    <div class="col-xs-4 bg-blue-light">Content 3</div>
  </div>
</body></html>

Versión corta para personas perezosas:

.overflow-x-scroll-no-scrollbar {overflow:hidden;}
.overflow-x-scroll-no-scrollbar div {
  overflow-x:hidden;
  margin-bottom:-17px;
  overflow-y:hidden;
  width:100%;
}
.overflow-x-scroll-no-scrollbar div * {
  overflow-x:auto;
  width:100%;
  padding-bottom:17px;
  white-space: nowrap; 
  cursor:pointer
}

/* the following classes are only here to make the example looks nicer */
.parent-style {width:100px;background-color:#FF9966}
<div class="parent-style overflow-x-scroll-no-scrollbar">
  <div>
    <div>This content too long for the container, so it needs to be hidden but scrollable without scrollbars</div>
  </div>
</div>
4
Jean

Esto funciona para mí:

scroll-content {
    overflow-x: hidden;
    overflow-y: scroll;
}

scroll-content::-webkit-scrollbar{
    width: 0;
}
3
mangesh

El complemento perfect-scrollbar parece ser el camino a seguir, consulte: https://github.com/noraesae/perfect-scrollbar

Está bien documentada y es una solución completa basada en JS para el problema de las barras de desplazamiento.

Página de demostración: http://noraesae.github.io/perfect-scrollbar/

3
jmarceli

Esta es una solución divisista que, sin embargo, debería funcionar para todos los navegadores ...

El marcado es el siguiente, y debe estar dentro de algo con posicionamiento relativo (y su ancho debe establecerse, por ejemplo, 400 px):

<div class="hide-scrollbar">
    <div class="scrollbar">
        <div class="scrollbar-inner">

        </div>
    </div>
</div>

El CSS:

.hide-scrollbar {
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.scrollbar {
    overflow-y: scroll;
    position: absolute;
    top: 0;
    left: 0;
    right: -50px;
    bottom: 0;
}

.scrollbar-inner {
    width: 400px;
}
3
user3638471

Esto será en el cuerpo:

<div id="maincontainer" >
<div id="child">this is the 1st step</div>
<div id="child">this is the 2nd step</div>
<div id="child">this is the 3rd step</div>

Y este es el CSS:

#maincontainer
{
    background: grey;
    width: 101%;
    height: 101%;
    overflow: auto;
    position: fixed;
}

#child
{
    background: white;
    height:500px;
}
3
Hilla

Resulta que probé las soluciones anteriores en mi proyecto y, por alguna razón, no pude ocultar la barra de desplazamiento debido a la posición div. Por lo tanto, decidí ocultar la barra de desplazamiento mediante la introducción de un div que lo cubre superficialmente. El siguiente ejemplo es para una barra de desplazamiento horizontal:

<div id="container">
  <div id="content">
     My content that could overflow horizontally
  </div>
  <div id="scroll-cover">
     &nbsp; 
  </div>
</div>

CSS correspondiente es el siguiente:

#container{
   width: 100%;
   height: 100%;
   overflow: hidden;
   position: relative;
}

#content{
  width: 100%;
  height: 100%;
  overflow-x: scroll;
}
#scroll-cover{
  width: 100%;
  height: 20px;
  position: absolute;
  bottom: 0;
  background-color: #fff; /*change this to match color of page*/
}
3
Sriram Ranganathan

Lo siguiente me funcionó en Microsoft, Chrome y Mozilla para un elemento div específico:

div.rightsidebar {
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
div.rightsidebar::-webkit-scrollbar { 
    width: 0 !important;
}
2
Meloman

Otro tipo de enfoque hacky es hacer overflow-y: hidden y luego desplazar manualmente el elemento con algo como esto:

function detectMouseWheelDirection( e ) {
  var delta = null, direction = false;
  if ( !e ) { // if the event is not provided, we get it from the window object
    e = window.event;
  }
  if ( e.wheelDelta ) { // will work in most cases
    delta = e.wheelDelta / 60;
  } else if ( e.detail ) { // fallback for Firefox
    delta = -e.detail / 2;
  }
  if ( delta !== null ) {
    direction = delta > 0 ? -200 : 200;
  }

  return direction;
}

if ( element.addEventListener ) {
 element.addEventListener( 'DOMMouseScroll', function( e ) {
   element.scrollBy({ 
     top: detectMouseWheelDirection( e ),
     left: 0, 
     behavior: 'smooth' 
  });
 });
}

Hay un gran artículo sobre cómo detectar y tratar con onmousewheel events en - deepmikoto's blog. Esto podría funcionar para usted, pero definitivamente no es una solución elegante.

2
Gark Garcia

Solo quería compartir un fragmento combinado para ocultar la barra de desplazamiento que utilizo al desarrollar. Es una colección de varios fragmentos encontrados en Internet que me funciona:

    .container {
        overflow-x: scroll; /* for horiz. scroll, otherwise overflow-y: scroll; */

        -ms-overflow-style: none;
        overflow: -moz-scrollbars-none;
        scrollbar-width: none;
    }


    .container::-webkit-scrollbar {
        display: none;  /* Safari and Chrome */
    }

Espero que encuentres esto útil :*

1
stamat

Otro violín de trabajo simple :

#maincontainer {
    background: orange;
    width: 200px;
    height: 200px;
    overflow: hidden;
}

#childcontainer {
    background: yellow;
    position: relative;
    width: 200px;
    height: 200px;
    top: 20px;
    left: 20px;
    overflow: auto;
}

Desbordamiento oculto en el contenedor primario y desbordamiento automático en el contenedor secundario. Sencillo.

1
geoyws

Solo establezca el ancho del ancho del niño al 100%, el relleno a 15px, overflow-x para desplazarse y desbordar: oculto para el padre y el ancho que desee, funciona perfectamente en todos los navegadores principales, incluyendo IE Edge con una excepción de IE8 e inferior.

2019: respuestas anteriores funciona.

no es necesario configurar el fondo la mayoría de las veces, pero hay un error que a veces la altura de la barra de desplazamiento se comporta mal. Esto lo puedes arreglar como se especifica abajo

height:0px; /* fixes issue with extra space underneath scrollbar */
width: 0px;  

0
zinoadidi

Tuve este problema, y ​​es super simple de arreglar.

Consigue dos contenedores. El interior será su contenedor desplazable y el exterior obviamente albergará el interior:

#inner_container { width: 102%; overflow: auto; }
#outer_container { overflow: hidden }

Es super simple y debería funcionar con cualquier navegador.

0