Deshabilita el desplazamiento del cuerpo, pero mantenlo en elementos div individuales que son de mayor altura que el navegador

He buscado en todas partes y todavía tengo que encontrar una solución. De acuerdo, este es el trato, tengo un sitio web de una página que tiene varios elementos div uno debajo del otro, algo así como actuar como páginas individuales, supongo. Lo que quiero lograr es deshabilitar el desplazamiento de la página web real en conjunto, manteniendo el desplazamiento del div activo en juego si va por debajo del navegador web. Para llegar a la otra sección de la página es simple hacer mediante el uso de enlaces de anclaje en el encabezado.

No estoy exactamente seguro de lo que estás buscando, pero creo que quieres que un div sea desplazable, pero no el documento real. Puede hacer esto colocando absolutamente el div en la pantalla con una altura fija y establezca el overflow en auto . Lo he hecho usando el siguiente código CSS:

 #scrollable { position: absolute; top: 10px; right: 10px; bottom: 10px; left: 10px; overflow: auto; }​ 

Vea un ejemplo: http://jsfiddle.net/rustyjeans/rgzBE/

¿Has probado con overflow-x:hidden;

Simplemente desactive la rueda global del mouse y las teclas de “desplazamiento” cuando el mouse esté en el elemento del cuerpo.

 var disableKeys = [33,34,35,36,37,38,39,40]; var mouseOverElement; $('*').on('mouseover', function(e) { if(e.target === e.currentTarget) { mouseOverElement = e.target; } }); $(document).keydown(function(e) { var key = e.which; if(disableKeys.indexOf(key) > -1 && mouseOverElement.tagName == "BODY") { e.preventDefault(); } }); $(document).on("mousewheel", function(e) { if(mouseOverElement.tagName == "BODY"){ e.preventDefault(); }; }); 

Ejemplo de trabajo: http://jsfiddle.net/9cSeq/2/

resulta bastante simple. CSS

 body{ overflow:hidden; } #div_you_need_scrolling{ overflow:auto; }