html - navegacion - Ocultar la barra de desplazamiento, pero al mismo tiempo se puede desplazar
ocultar barra de scroll sin deshabilitarlo (23)
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.
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;
}
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>
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>
Esta es una solución divisista que, sin embargo, debería funcionar para todos los navegadores ...
El marcado es el siguiente, y debe estar dentro de algo con posicionamiento relativo (y su ancho debe establecerse, por ejemplo, 400 px):
<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;
}
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;
}
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;
}
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.
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.
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">
</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 */
}
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.
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;
}
Información:
Sobre la base de esta respuesta, he creado un complemento de desplazamiento simple . Espero que esto ayude a alguien.
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.
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!
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;
}
perfect-scrollbar complemento de la perfect-scrollbar parece ser el camino a seguir, consulte: https://github.com/noraesae/perfect-scrollbar
Está bien documentada y es una solución completa basada en JS para el problema de las barras de desplazamiento.
Página de demostración: http://noraesae.github.io/perfect-scrollbar/
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).
#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>
<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.