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




que funcione (20)

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

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.


Simplemente 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, incluido IE Edge con una excepción de IE8 y inferior.


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.


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

Las soluciones de relleno o margen de impacto de valor de tamaño de caja , funcionan con el tamaño de caja: 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;
}

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

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


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


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!


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

No estoy seguro si llego tarde a la fiesta pero agregando

    overflow: -moz-scrollbars-none;

trabajó para mi


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

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

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.


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.


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

En deepmikoto's blog deepmikoto's un gran artículo sobre cómo detectar y tratar los eventos de deepmikoto's . Esto podría funcionar para usted, pero definitivamente no es una solución elegante.


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 ese es el css:

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

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

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>


<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


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.


No de forma nativa, pero supongo que podría implementar su propio mecanismo de desplazamiento mediante el uso de Javascript para capturar ciertas pulsaciones de teclas y reubicar el elemento contenedor en consecuencia con CSS. Sin embargo, va a ser feo!





html css google-chrome internet-explorer firefox