¿Utiliza jQuery para ocultar la barra de desplazamiento div, pero conserva el desplazamiento?

Estoy tratando de poder desplazarme dentro de un div pero sin mostrar la barra de desplazamiento real.¿Utiliza jQuery para ocultar la barra de desplazamiento div, pero conserva el desplazamiento?

necesito que el usuario sea capaz de desplazarse utilizando la rueda de desplazamiento

¿Alguien tiene ideas en cuanto a cómo puedo lograr esto?

Gracias!

Fuente

2012-08-29 Eax

¿Cómo desea desplazarse si no hay barra de desplazamiento? ¿botón central del mouse? haga clic arrastrando? sobrevolando arriba o abajo? –

¡Drat! ¡Lo siento! ¡Tienes razón! :) Rueda de desplazamiento/mouse medio. (Actualizando la pregunta) – Eax

Puedes hacer algo como esto con css, hmm .... http: // jsfiddle.net/c7tR8/el único problema es que no es muy obvio que haya más contenido en el div cuando no se puede ver una barra de desplazamiento. –

Bueno, la verdadera razón sería por qué usted quiere eso, pero ya que lo preguntas Voy a tratar de resolver su problema.

Necesitará dos divs. Uno anidado dentro del otro.

<div class="outside"> 
    <div class="inside"> 
     Scrolling Content Goes here. 
    </div> 
</div>

Necesitarás un poco de CSS para resolver esta situación. El desbordamiento: automático le dará el desplazamiento una vez que pase las limitaciones de altura. Puse un ancho aleatorio por el bien del ejemplo. Pon un relleno en el lado derecho para empujar la barra de desplazamiento fuera de la clase Div. De esta forma, no tendrá que preocuparse por el contenido que está debajo del div.

.inside { width: 500px; overflow: auto; height: 300px; padding-right: 20px; }

para la clase exterior deberá especificar la misma altura, el mismo ancho, pero desbordamiento: oculto.

.outside { width: 500px; height: 300px; overflow: hidden; }

Ejemplo: jsFiddle

Fuente

2012-08-29 20:49:17 ZombieCode

Esto no es consistente en diferentes niveles de zoom: el ancho de la barra de navegación generalmente cambia con el nivel de zoom, lo que hace que la barra de navegación sea visible para una configuración de navegador (realmente extraña). Además, tal vez más realistas que los acercamientos excesivamente incómodos, los diferentes navegadores tendrán diferentes barras de desplazamiento anchas que no lo harán tan universal como podría serlo. Esto es realmente tan oscuro que nadie debería (generalmente) tener que preocuparse por eso, pero solo quería señalarlo. – lindhe

Tal vez puedas usar CSS y esconder o hacer un poco de estilo con él para que quede oculto. Aquí hay uno de algunos enlaces que encontré.

http://css-tricks.com/custom-scrollbars-in-webkit/

http://www.yourhtmlsource.com/stylesheets/scrollbars.html

Fuente

2012-08-29 20:46:49 index

Esto fue probado en IE y Firefox - tanto manejar el relleno de manera un poco diferente, por lo que estoy usando altura y anchura para dar cuenta de la visibilidad del contenido.

Tiene sentido tener 2 contenedores, uno para el contenedor y otro para el contenido; sin embargo, dado que los navegadores manejan el relleno de manera diferente, es mucho más difícil de lo que parece empujar la barra de desplazamiento hacia el área oculta. Aquí es donde entra el tercer recipiente en:

Un contenedor para las dimensiones de los padres y sin barras de desplazamiento
Un contenedor que contiene la barra de desplazamiento que se introduce en el área oculta
Un contenedor que alberga el contenido con el ancho correcto establecido

Esto se logra a través de trucos de hojas de estilo: se ha comentado la hoja de estilo para que pueda seguir las instrucciones/comentarios allí.

Espero que esto ayude! :)

<html> 
<head> 
    <style type="text/css"> 
    /* Propetary paragraph style */ 
    p { 
     padding: 0px; 
     margin: 0px 0px 7px 0px; 
    } 
    /* Global notes: 
     - Since the 
    /* This is the outer container - set desired height and width here */ 
    .scrollabelDivContainer { 
     width: 300px; 
     height: 100px; 
     padding: 0px; 
     margin: 0px; 
     overflow: hidden; 
     border: 2px dashed #ddd; 
    } 
    /* This is the div inside the container - the height should 
     match the container and width be more (to push the 
     scrollbar into the hidden content area) */ 
    .scrollableDiv { 
     width: 400px; 
     height: 100px; 
     padding: 0px; 
     margin: 0px; 
     overflow-x: hidden; 
     overflow-y: scroll; 
    } 
    /* This houses the content. Set the widget 10px less than the 
     container width to ensure the content is visible in all browsers */ 
    .scrollableDivContent { 
     width: 290px; 
     padding: 0px; 
     margin: 0px; 
     overflow: auto; 
    } 
    </style> 
</head> 

<body> 
    <div class="scrollabelDivContainer"> 
     <div class="scrollableDiv"> 
      <div class="scrollableDivContent"> 
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tincidunt consequat urna ut tincidunt. Vestibulum molestie leo quis dui malesuada vulputate eget tempor purus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras nec orci enim, vel tristique lectus. Sed lobortis ultrices enim eu consequat.</p> 
       <p>Integer magna lectus, iaculis sit amet interdum nec, ullamcorper ut purus. Sed aliquam sollicitudin lacinia. Proin porttitor aliquet lorem, eu dictum lorem suscipit et. Ut vestibulum eros quis turpis auctor id sollicitudin risus faucibus. Quisque volutpat nibh ut sem euismod rutrum. Ut eget orci non quam scelerisque laoreet sit amet a metus. Mauris aliquam facilisis lacinia.<p> 
      </div> 
     </div> 
    </div> 
</body> 

</html>

Fuente

2012-08-29 21:15:22

¿Utiliza jQuery para ocultar la barra de desplazamiento div, pero conserva el desplazamiento?

Respuesta

Cuestiones relacionadas