tema de desplazamiento con desbordamiento CSS: HTML desplazamiento

Aquí es jsFiddle para una mejor comprensión: http://jsfiddle.net/BzYcZ/tema de desplazamiento con desbordamiento CSS: HTML desplazamiento

Tengo cierta div que tiene barras de desplazamiento.

Lo que quiero es cuando uso el desplazamiento del mouse para detener el desplazamiento cuando llego al final del div y no para desplazarme por toda la página.

Lo que sucede insted es que cuando llego al final de la div toda la página comienza a desplazarse.

Entiendo que esto es impulsado por el navegador, pero hay algún evento JS que puede manejar este tipo de situación & evitar que se desplace la página entera ya que mi cursor está sobre este elemento div.

EDIT:

Quiero ser capaz de desplazarse a toda la página, pero sólo cuando el ratón está fuera de este div.

SOLUCIÓN

.noscroll 
{ 
    position: fixed; 
    overflow-y: scroll; 
    width: 100%; 
}

Y aquí es la parte JavaScript:

$('.small_content').hover(
    function() { 
     $('body').addClass('noscroll'); 
    }, 
    function() { 
     $('body').removeClass('noscroll'); 
    } 
);

Aquí es un enlace a la jsFiddle de trabajo: http://jsfiddle.net/BzYcZ/3/

Fuente

2012-08-08 sensor

Personalmente esta es una característica que me gusta y uso mucho. No tenerlo me molestaría. – Bojangles

Configuración 'cuerpo {desbordamiento: oculto}' evitará que la página se desplace. Pero, ¿por qué no solo tener una altura contenida en la página para que no haya un desbordamiento que ocultar? – Joe

@Joe Actualicé mi pregunta porque quiero ser capaz de desplazar el cuerpo. Lo que significa que debe existir algún tipo de JavaScript dependiendo de la posición del mouse, deshabilitando la capacidad de desplazamiento del cuerpo. – sensor

podría usar jQuery y congelar las barras de desplazamiento de el cuerpo/html

(por cierto, jQuery es una biblioteca JavaScript que hace que la codificación sea más fácil y más rápido: http://jquery.com/)

Ejemplo:

$('.yourdivclass').hover(
function() { 
    $('html, body').css("overflow", "hidden"); 
}, 
function() { 
    $('html, body').css("overflow", "auto"); 
});

ACTUALIZACIÓN:

Para mantener las barras de desplazamiento y simplemente desactivarlas, siga esta solución: Just disable scroll not hide it?

Ejemplo aquí: http://jsfiddle.net/BzYcZ/2/

Actualizado Javascript aquí:

$('.small_content').hover(
function() { 
    $('body').addClass('noscroll'); 
}, 
function() { 
    $('body').removeClass('noscroll'); 
});

El CSS extra:

body.noscroll 
{ 
    position: fixed; 
    overflow-y: scroll; 
    width: 100%; 
}

Fuente

2012-08-08 14:16:03 jackJoe

Actualmente, quiero ser capaz de desplazar el cuerpo/html dependiendo de dónde se encuentra mi cursor – sensor

@sensor Actualicé mi respuesta con un ejemplo, ocultará las barras de desplazamiento del html/body cuando está pasando el div con el clase 'yourdivclass' – jackJoe

¡Gracias por su respuesta! Ya lo intenté, pero el parpadeo de la página es realmente malo, ya que la barra de desplazamiento de toda la página desaparece cuando se produce el desbordamiento: oculto. – sensor

Puede añadir overflow:hidden propiedad a cuerpo si no desea desplazarse contenedor cuerpo en absoluto, o puede utilizar jQuery para congelar la barra de desplazamiento del contenedor del cuerpo, como se hace en Facebook.

Fuente

2012-08-08 14:18:29

tema de desplazamiento con desbordamiento CSS: HTML desplazamiento

Respuesta

Cuestiones relacionadas