Ocultar barra de desplazamiento, pero aún siendo capaz de desplazarse

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 no puedo desplazarme más.

¿Hay alguna forma de eliminar la barra de desplazamiento sin dejar de desplazar toda la página?

Con solo CSS o HTML, por favor.

Solo una prueba que funciona bien.

#parent{
    width: 100%;
    height: 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.

Fiddle de trabajo de JavaScript

O

Utilizando Position: absolute,

#parent{
    width: 100%;
    height: 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

Fiddle de trabajo de JavaScript

Información:

Basado en esta respuesta, creé un simple complemento de desplazamiento .

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

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;

ACTUALIZAR:

Firefox ahora admite ocultar barras de desplazamiento con CSS, por lo que todos los principales navegadores están cubiertos (Chrome, Firefox, Internet Explorer, 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;  /* Internet Explorer 10+ */
}
.container::-webkit-scrollbar { /* WebKit */
    width: 0;
    height: 0;
}

Esta es la solución de navegador cruzado menos hacky que conozco actualmente. Mira la demo.

RESPUESTA ORIGINAL:

Aquí hay otra forma que aún no se ha mencionado. Es realmente simple y solo involucra dos divs y CSS. No se necesita JavaScript ni CSS patentado, y funciona en todos los navegadores. Tampoco requiere establecer explícitamente el ancho del contenedor, lo que lo hace fluido.

Este método usa 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:

• Vertical
• Horizontal
• Ambas direcciones

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

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 algo la barra de desplazamiento con un div superpuesto que no tiene barras de desplazamiento:

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

Esto es solo para los navegadores WebKit ... 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 uso de Microsoft Edge: -ms-overflow-style: -ms-autohiding-scrollbar;o -ms-overflow-style: none;según MSDN .

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

Esta respuesta no incluye el código, así que aquí está la solución de la 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 relleno o diferencias de ancho para ocultar la barra de desplazamiento.

Esto también es seguro para el zoom. Las soluciones de relleno / ancho muestran la barra de desplazamiento cuando se amplía 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>

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 el pergamino.

Esto funciona para mí cross-browser. Sin embargo, esto no oculta las barras de desplazamiento nativas en los navegadores móviles.

En SCSS

.hide-native-scrollbar {
  scrollbar-width: none; /* Firefox 64 */
  -ms-overflow-style: none; /* Internet Explorer 11 */
  &::-webkit-scrollbar { /** WebKit */
    display: none;
  }
}

En CSS

.hide-native-scrollbar {
  scrollbar-width: none; /* Firefox 64 */
  -ms-overflow-style: none; /* Internet Explorer 11 */
}
.hide-native-scrollbar::-webkit-scrollbar { /** WebKit */
  display: none;
}

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

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

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 CSS Stylingbar Styling .

Solo usa el siguiente CSS:

scrollbar-width: none;

Enlace de la nota de lanzamiento de Firefox 64 aquí .

Utilizar:

CSS

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

HTML

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

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 se puede desplazar en Chrome como lo probé en Chrome, pero no estoy seguro de los otros navegadores.

Esto funciona para mi:

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

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

En los navegadores modernos puede usar wheel event:

// Content is the element you want to apply the wheel scroll effect to
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;
});

Mi problema: no quiero ningún estilo en mi contenido HTML. Quiero que mi cuerpo se pueda desplazar directamente sin ninguna barra de desplazamiento, y solo un desplazamiento vertical, que funcione con cuadrículas CSS para cualquier tamaño de pantalla.

El valor del tamaño de la caja impacta las soluciones de margen o margen, funcionan con el tamaño de la caja: content-box .

Todavía necesito la directiva "-moz-scrollbars-none", y al igual que gdoron y Mr_Green, tuve que ocultar la barra de desplazamiento. Lo intenté -moz-transformy -moz-padding-start, para afectar solo a Firefox, pero hubo efectos secundarios receptivos que necesitaron demasiado 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;  /* Internet Explorer 10+ */
  overflow: -moz-scrollbars-none; /* Should hide the scroll bar */
}

/* No scroll bar for Safari and Chrome */
html::-webkit-scrollbar,
body::-webkit-scrollbar {
  display: none; /* Might be enough */
  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;
}

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

Lo que sí funciona en ambos casos es aumentar el ancho del interior dival 100% más el ancho de la barra de desplazamiento (suponiendo overflow: hiddenen 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 + ')';

Así es como lo hago para el desplazamiento horizontal; solo CSS y funciona bien con marcos como Bootstrap / col- *. Solo necesita dos divs adicionales y el padre con un widtho max-widthconjunto:

Puede seleccionar el texto para que se desplace o desplazarse 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 gente perezosa:

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

El siguiente estilo SASS debería hacer que su barra de desplazamiento sea transparente en la mayoría de los navegadores (Firefox no es compatible):

.hide-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;

  &::-webkit-scrollbar {
    width: 1px;
  }

  &::-webkit-scrollbar-track {
    background: transparent;
  }

  &::-webkit-scrollbar-thumb {
    background-color: transparent;
  }
}

Intenté probar las soluciones anteriores en mi proyecto y, por alguna razón, no pude ocultar la barra de desplazamiento debido al posicionamiento div. Por lo tanto, decidí ocultar la barra de desplazamiento introduciendo un div que lo cubriera 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>

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

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

Esta es una solución divitis-esque que no obstante debería funcionar para todos los navegadores ...

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

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

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

Es una solución bien documentada y completa basada en JavaScript para el problema de las barras de desplazamiento.

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

Puede usar el siguiente código para ocultar la barra de desplazamiento, pero aún así puede desplazarse:

.element::-webkit-scrollbar { 
    width: 0 !important 
}

Para ocultar barras de desplazamiento para elementos con contenido desbordante, use.

.div{

  scrollbar-width: none; /* The most elegant way for Firefox */

}    

Otro tipo de enfoque hacky es hacer overflow-y: hiddeny 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 onmousewheeleventos en el blog de deepmikoto . Esto podría funcionar para usted, pero definitivamente no es una solución elegante.

Solo quería compartir un fragmento combinado para ocultar la barra de desplazamiento que uso cuando desarrollo. Es una colección de varios fragmentos encontrados en Internet que funciona para mí:

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

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

Esta solución difícil funciona incluso en el antiguo navegador web IE

Es una solución alternativa a la [ barra de desplazamiento vertical ]

<html>
<head>
<style>
html,body{
         overflow:-moz-scrollbars-vertical;
         overflow-x:hidden;
         overflow-y:hidden;
         height:100%;
         margin:0 0 0 0
         }
</style>
</head>
<body id=body
      style="overflow:auto;
             height:100%" 
      onload="document.getElementById('body').style.width=document.body.offsetWidth+20+'px'">
//your stuff here
</body> 
</html>

Solo pruébalo: jsfiddle

Simplemente configure el ancho del ancho del niño al 100%, el relleno a 15 píxeles, overflow-xpara desplazarse y overflow:hiddenpara el padre y el ancho que desee.

Funciona perfectamente en todos los principales navegadores, incluidos Internet Explorer y Edge, con la excepción de Internet Explorer 8 y versiones anteriores.