javascript - not - Problema de desplazamiento con desbordamiento de CSS: scroll HTML

scroll en html

Question

Aquí está jsFiddle para una mejor comprensión: http://jsfiddle.net/BzYcZ/

Tengo algunos div que tienen barras de desplazamiento.

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

Lo que sucede insinuado 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 pueda manejar este tipo de situación y evitar desplazarse por toda la página mientras mi cursor está sobre este elemento div?

EDITAR:

Quiero poder desplazarme por toda la página, pero solo cuando mi mouse esté fuera de este div.

SOLUCIÓN

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

Y aquí está la parte de JavaScript:

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

Aquí hay un enlace al jsFiddle de trabajo: http://jsfiddle.net/BzYcZ/3/

Answer 1

Puede agregar overflow:hidden propiedad overflow:hidden al cuerpo si no desea desplazar el contenedor del cuerpo, o puede usar jQuery para congelar la barra de desplazamiento del contenedor del cuerpo, como se hace en Facebook.

Answer 2

podrías usar jQuery y congelar cualquier barra de desplazamiento del cuerpo / html

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

Ejemplo:

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

ACTUALIZAR :

Para mantener las barras de desplazamiento y simplemente deshabilitarlas, siga esta solución: ¿Deshabilitar el desplazamiento no ocultarlo?

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

Javascript actualizado aquí:

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

El CSS adicional:

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