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

1129

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.

Oussama el Bachiri
fuente

Respuestas:

788

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 .

SR verde
fuente
16
En su último "violín de trabajo" he visto demasiados, !importantasí que los eliminé
Roko C. Buljan
2
Esta solución no funciona cuando el ancho del contenido está configurado en automático. al desplazarse hacia la derecha, parte del contenido aún no está visible. ¿Porqué es eso? ¿Alguna solución? Consulte el problema aquí: jsfiddle.net/50fam5g9/7 Nota: el ancho del contenido no se puede conocer de antemano en mi caso, por eso debe configurarse en automático.
Sprout Coder
35
Este enfoque no cubrirá todos los navegadores, y será muy específico para la versión del navegador con la que esté trabajando durante el desarrollo.
Itsik Avidan
2
¿Qué pasa con las barras de desplazamiento horizontal? ¿Cómo puedes esconderlos?
www139
11
¿Por qué complicar y calcular el ancho de la barra de desplazamiento? Simplemente establezca box-sizing: border-box; width: calc(100% + 50px);el mismo valor para el relleno. No hay ningún navegador tiene 50px barra de desplazamiento anchura / altura, por lo que sólo debe cubrir a todos ...
Robert Koritnik
362

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;
}
Anirban Bhui
fuente
1
Probé esto en la cordovaaplicación, funcionó bien. tuvo que aplicar overflow:scrollal elemento.
Kishor Pawar
41
No funciona en Firefox, bastante obvio ya que esto afirma puramente un kit web. Gracias :)
Zohair
3
funciona excelente en aplicaciones Electron como se esperaba ya que son cromo. +1 gracias: D
rococó
Desde iOS8, esto no funciona cuando se usa con-webkit-overflow-scrolling: touch
aleclarson
44
Funciona con cromo. pero no funciona con mozilla firefox.
roman tandel
299

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;

Hristo Eftimov
fuente
13
Para mí, overflow: -moz-scrollbars-noneoculta las barras de desplazamiento en Firebox pero también deshabilita el desplazamiento. ¿Puede proporcionar una demostración donde esto funcione para usted?
chipit24
1
Lamentablemente, la -moz-scrollbars-nonepropiedad se elimina para las versiones más recientes de Firefox: developer.mozilla.org/en-US/docs/Web/CSS/overflow
Hristo Eftimov
2
Desde iOS8, esto no funciona cuando se usa con-webkit-overflow-scrolling: touch
aleclarson
3
Para Firefox obsoleto -moz-scrollbars-nonepuedes usar @-moz-document url-prefix() { .container { overflow: hidden; } }. Ver stackoverflow.com/questions/952861/… .
Martin Ždila
1
He actualizado mi respuesta con el último soporte para Firefox :)
Hristo Eftimov
292

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:

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;
}
Richrd
fuente
39
Sé que esta es una nueva respuesta a una vieja pregunta, pero esta debería ser la respuesta aceptada ahora. Buenas cosas hombre.
Vector
3
Esta es absolutamente la mejor respuesta, sin duda. Ahora, ¿cómo se modifica para ocultar barras de desplazamiento horizontales?
CeeMoney
1
@CeeMoney Agregué una demostración horizontal. Para elementos de contenido de ancho fijo, como las imágenes, debería funcionar, pero para el texto debe deshabilitar el ajuste.
Richrd
1
@Richrd, muchas gracias por la demostración, funciona perfectamente. No sé por qué todos lo hacemos tan difícil, pero esto es tan simple que me siento tonto por no haberlo hecho antes.
CeeMoney
44
¡Gracias @Richrd! Estoy tan contento de haberme desplazado a tu respuesta. Si SO tuviera alguna "respuesta de fuerza aceptada", definitivamente la usaría ahora.
Martin D
78

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

Arpit Singh
fuente
ictacademie.info/oussamaelbachiri este sitio @Oussama Dobby usa media = 'screen' y luego la propiedad ':: - webkit-scrollbar' para css
Arpit Singh
¿Y cuáles son las propiedades específicas de CSS?
Oussama el Bachiri
ya sea un diseño hacky o jquery es una alternativa
Arpit Singh
Su primera solución me da este problema s24.postimg.org/idul8zx9w/Naamloos.jpg ¿Y qué quiere decir con diseño hacky @ArpitSingh
Oussama el Bachiri
44
Lo siguiente me permitió habilitar el desplazamiento nativo en Córdoba con jQuery Mobile 1.4 en iOS7 y iOS8 // CSS ::-webkit-scrollbar { display: none; } .ui-content { -webkit-overflow-scrolling: touch; } // jQuery Mobile onMobileInit () $.mobile.touchOverflowEnabled = true;
Ryan Williams
33

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>

Timo Kähkönen
fuente
Esto no funcionará para todos los navegadores ... Solo los navegadores webkit. Está utilizando un selector específico de webkit::-webkit-scrollbar {}
prefijo del
Lo probé en todos los navegadores nuevos antes de responder a la pregunta. También FF. ¿Ha sucedido algunos cambios en FF?
Timo Kähkönen
Actualicé la respuesta. Parece que agregarlo lo padding-right: 150px;arregla. Probado en FF, Chrome, Safari y Edge. Funciona también en niveles bajos de zoom debido al gran relleno derecho.
Timo Kähkönen
2
Soporte Edge, IE 11, IE10 (quizás también más bajo) html { -ms-overflow-style: none;}. En estos navegadores no es necesario usar padding-hack.
Timo Kähkönen
Tuve que usar la respuesta de @ Timo y overflow-y: scrollobtener un comportamiento de desplazamiento pero oculto (al igual que Chrome) para que funcione en Edge23.
jojo
21

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.

Innodel
fuente
Muéstrame tu problema en violín
Innodel
1
Fácil y útil, gracias! Usé {display: none} en lugar de {width: 0;} y también trabajo
Santi Nunez
2
No funciona en MS Edge o Firefox.
Dpedrinha
18

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;
}
Murhaf Sousli
fuente
¿Qué significan los bloques anidados ( {})? ¿Cómo se debe interpretar? Y el &? Quizás elaborado en su respuesta?
Peter Mortensen
Es una cosa SASS (aparentemente, MENOS también): css-tricks.com/the-sass-ampersand
vipatron
@ PeterMortensen Acabo de ver tu comentario ahora, se &::-webkit-scrollbarconvierte .hide-native-scrollbar::-webkit-scrollbar { }en CSS
Murhaf Sousli
solo hazlo { width: 0; height: 0;}para :: - webkit-scrollbar en lugar de display: nonepara iOS.
adriendenat
En FF71 esto bloquea todo el desplazamiento.
gen b.
11

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;
}
Meloman
fuente
tenga en cuenta que scrollbar-width(solo FF) se marca como "experimental"
cimak
Sí @cimak, pero en FF puedes ocultarlo sin ningún problema, por lo que realmente solo se usa para Chrome.
Meloman
9

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

Mischa
fuente
8

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

Chris
fuente
3
¡Es muy bueno saberlo! Parece que los navegadores realmente están progresando, ¡jaja!
Oussama el Bachiri
7

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>
Owais
fuente
No estoy seguro de por qué esto se votó negativamente, pero simplemente lo voté porque va en la dirección correcta, las otras soluciones realmente no funcionaron bien en mi caso. overflow-x: oculto; + overflow-y: desplazamiento; es lo que funcionó, junto con el ancho> 100% (110% en mi caso funcionó bien).
dAngelov
1
es lo mismo que la solución más votada: tratar de ocultar la barra de desplazamiento. esto no es ideal porque varía con el navegador
mwm
6

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.

usuario43353
fuente
6

Esto funciona para mi:

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

scroll-content::-webkit-scrollbar {
    width: 0;
}
Mangesh
fuente
5

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;
});
Doua Beri
fuente
Esta es la respuesta que estaba buscando. Gracias. Usé overflow: hiddeny este código, para que mat-card-content(en angular 5, por supuesto) sea desplazable y esto resolvió mi problema. Nota: Utilicé e.deltaYcomo mi stepy funcionó como un desplazamiento normal, por lo que creo que para el desplazamiento normal pero con la barra de desplazamiento oculta, esta es la mejor coincidencia.
imans77
1
la página vinculada aquí advierte que este enfoque no es apropiado?
jnnnnn
5

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;
}
Lucile Fievet
fuente
4

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 + ')';
Germán
fuente
4

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>

Vaquero
fuente
Gracias, lo intenté, funciona muy bien. Una cosa es que es mejor cambiar margin-bottompara ser padding-bottompero con el mismo valor. Esto no comerá debajo del espacio para el elemento en la parte inferior. Previene la superposición.
haxpor
@haxpor The margin-bottomes negativo, creo que no se puede cambiar a a padding-bottom, que no puede manejar valores negativos
Jean
4

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;
  }
}
Alejandro
fuente
3

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*/
}
Adam Ranganathan
fuente
3

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;
}
Hilla
fuente
3

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;
}
Peter Mortensen
fuente
3

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/

jmarceli
fuente
2
No puedo ver cómo se relaciona esto con la pregunta.
Chris Nevill
3
He estado mirando la barra de desplazamiento perfecta durante 2 minutos sin una revelación inmediata de cómo usarla para ocultar la barra de desplazamiento . Si amplía su respuesta sobre ese tema, estoy seguro de que obtendrá más votos a favor.
Christiaan Westerbeek
3

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

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

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

.div{

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

}    
Alvin Moyo
fuente
El soporte es prácticamente inexistente a excepción de FF, como mencionó con, es muy poco para lo que solicitó el OP. Consulte caniuse.com/#feat=mdn-css_properties_scrollbar-width
Adrien
@Adrien Bueno, la pregunta original decía que tenían una solución para otros navegadores. (Pero Mozilla Firefox e Internet Explorer no parecen funcionar así), dice, esa es la razón por la que le di la solución Firefox.
Alvin Moyo
Descubrí que esto funcionaba bien cuando se combinaba con el equivalente: div :: - webkit-scrollbar {display: none; } para Webkit / Chrome.
Sean Halls
2

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.

Gark Garcia
fuente
2

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 */
}
stamat
fuente
1

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.

geoyws
fuente
Esto no oculta la barra de desplazamiento, solo la empuja fuera de la vista con el valor "izquierda".
robertmiles3
@ robertmiles3 ¿no es eso lo mismo? esconderse y no poder ver?
Bryan Willis
1
@ robertmiles3 la respuesta seleccionada arriba hace lo mismo desde la derecha. Parece que todas las soluciones son hacky hasta que FIrefox decide permitir que CSS oculte nuevamente las barras de desplazamiento. blogs.msdn.com/b/kurlak/archive/2013/11/03/…
geoyws
Tengo que estar de acuerdo. Esta es una solución similar propuesta por la respuesta aceptada. Si funciona, funciona. upvoted
JSON
1

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

PYK
fuente
0

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.

Sibongiseni Bentley Msomi
fuente