Pregunta Ocultar barra de desplazamiento, pero mientras 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 esconde la barra de desplazamiento, pero ya no puedo desplazarme.

¿Hay alguna forma de que pueda eliminar la barra de desplazamiento y seguir desplazando toda la página? Con solo CSS o HTML, por favor.


651
2018-05-21 13:11


origen


Respuestas:


Solo una prueba que funciona 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 */
}

Fiddle de trabajo

JavaScript:

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

Fiddle de trabajo de JavaScript

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;
}

Fiddle de trabajo

Fiddle de trabajo de JavaScript

Información:

Basado en esta respuesta, creé un plugin simple scroll. Espero que esto ayude a alguien.


518
2018-05-21 13:37



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;
}

210
2018-06-06 09:10



Esto funciona para mí:

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

Nota: En las últimas versiones de Firefox, -moz-scrollbars-none la propiedad está en desuso enlazar )


90
2017-08-17 11:03



<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 barras de desplazamiento

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

esto es solo para navegadores webkit .. o puede usar CSS específicos del navegador (si los hay en el futuro) cada navegador podría tener una propiedad diferente y específica para sus respectivas barras

--EDITAR--

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

No hay equivalente para FF Aunque hay un plugin de JQuery para lograr esto http://manos.malihu.gr/tuts/jquery_custom_scrollbar.html


59
2018-05-21 13:22



Esta Responder no incluye el código, así que aquí está la solución de página:

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

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

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

Corrección de FF: 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>


29
2017-11-21 13:33



Aquí hay otra manera que no se ha mencionado aún. Es realmente simple y solo implica dos divs y CSS. No se necesita JavaScript o CSS propietario y funciona en todos los navegadores.

Este ejemplo demuestra la ocultación de las barras de desplazamiento verticales, pero puede adaptarse fácilmente a las barras de desplazamiento horizontales. Utiliza el margen negativo para mover la barra de desplazamiento fuera del elemento primario y luego la misma cantidad de relleno para empujar el contenido a su posición original.

Vertical Demostración JsFiddle.

Horizontal Demostración JsFiddle.

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;
}

18
2018-03-14 12:57



Simplemente use las siguientes 3 líneas y su problema será resuelto:

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

Donde liaddshape es el nombre de div donde scrool está llegando.


13
2017-10-22 04:20



#subparant{
    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="subparant">
        <div id="parent">
            <div id="child">
                <!- code here for scroll ->
            </div>
        </div>
     </div>
 </body>

6
2018-04-18 17:46



function reloadScrollBars() {
    document.documentElement.style.overflow = 'auto';  // firefox, chrome
    document.body.scroll = "yes"; // ie only
}

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

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


5
2017-08-03 14:49