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




ocultar scroll pero que funcione (16)

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.

https://code.i-harness.com


Agregar relleno a un div interno, como en la respuesta actualmente aceptada, no funcionará si por alguna razón desea usar box-model: border-box .

Lo que funciona en ambos casos es aumentar el ancho del div interno al 100% más el ancho de la barra de desplazamiento (suponiendo overflow: hidden en el div externo).

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 + ')';

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

En los navegadores modernos, puede usar el wheel event https://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;
});

Esta Answer no incluye el código, así que aquí está la solución de la 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 here .

Lo bueno es que no está obligado a usar relleno o 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.

FF fix: 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>


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, la -moz-scrollbars-none está en desuso ( link ).


Fácil en Webkit, con 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;
}

No estoy seguro si llego tarde a la fiesta pero agregando

    overflow: -moz-scrollbars-none;

trabajó para mi


Otro simple fiddle trabajo.

#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.


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*/
}

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 */
}

Violín de trabajo

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 Fiddle de trabajo

o

Position: absolute uso 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;
}

Violín de trabajo

JavaScript Fiddle de trabajo

Información:

Sobre la base de esta respuesta, he creado un complemento de desplazamiento simple . Espero que esto ayude a alguien.


Solo 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 viene scrool.


Tuve este problema Súper simple de arreglar. conseguir 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 }

Súper simple y debería funcionar con cualquier navegador. ¡Buena suerte!



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ébalo here (probado en IE y FF).


<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 navegadores webkit ... o puede usar 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

--EDITAR--

Para el uso de Microsoft Edge: -ms-overflow-style: -ms-autohiding-scrollbar; o -ms-overflow-style: none; según MSDN .

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


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, descargar o volver a cargar las barras de desplazamiento. Todavía desplazable en Chrome como lo probé en Chrome. No estoy seguro de los otros navegadores.





firefox