Desplazar siempre un elemento div y no la página

Question

Tengo un diseño de página con un elemento interno <div id="content"> que contiene las cosas importantes de la página. La parte importante sobre el diseño es:

#content { 
    height: 300px; 
    width: 500px; 
    overflow: scroll; 
} 

Ahora, cuando el texto que contiene es mayor que 300 píxeles, que tienen que ser capaces de desplazarse por él. ¿Es posible desplazar el <div>, incluso cuando el mouse no está sobre el elemento (las teclas de flecha también deberían funcionar)?

Tenga en cuenta que no quiero deshabilitar el desplazamiento 'global': debe haber dos barras de desplazamiento en la página, la barra de desplazamiento global y la barra de desplazamiento para el <div>.

Lo único que cambia es que el interior <div> siempre debe desplazarse a menos que ya no se pueda mover (en este caso, la página debe comenzar a desplazarse).

¿Es posible lograr esto de alguna manera?

Editar

Creo que el problema era un poco complicado, así que voy a añadir una secuencia de cómo me gustaría que funcione. (Khez ya proporcionó una prueba de concepto.)

La primera imagen es cómo se ve la página cuando se abre.

Ahora, el ratón se encuentra en la posición indicada y se desplaza y lo que debería ocurrir es que

• Primero los interiores rollos div su contenido (Fig. 2)
• El div interior ha terminado de desplazamiento (Fig 3)
• El elemento del cuerpo se desplaza para que la div se mueva. (Fig. 4)

Espero que esté un poco más claro ahora.

(Imagen gracias a gomockingbird.com)

Answer 1

no creo que es posible alcanzar sin secuencias de comandos, lo que podría ser un poco incómodo, teniendo en cuenta los numerosos acontecimientos que desplazan un elemento (clic, rueda de desplazamiento, abajo flecha, barra espaciadora).

Answer 2

La única forma en que creo que puede lograr esto es mediante el uso de marcos.

Frames - W3Schools Reference

Answer 3

Una opción podría estar usando el plugin de desplazamiento de jQuery. Sé que tiene la disponibilidad para crear barras de desplazamiento en un div. Lo único que necesita agregarse es la lógica para captar los eventos cuando se presionan los botones del teclado. Solo mira los códigos de tecla de las teclas de flecha y haz que el div se desplace hacia abajo.

El complemento se puede encontrar here.

Puede usarlo así;

<script type="text/javascript"> 
    // append scrollbar to all DOM nodes with class css-scrollbar 
    $(function(){ 
    $('.css-scrollbar').scrollbar(); 
    }) 
</script> 

Answer 4

aquí es una solución que podría funcionar: (violín: http://jsfiddle.net/maniator/9sb2a/)

var last_scroll = -1; 
$(window).scroll(function(e){ 
    if($('#content').scrollTop()); 
    var scroll = $('#view').data('scroll'); 
    if(scroll == undefined){ 
     $('#content').data('scroll', 5); 
     scroll = $('#content').data('scroll'); 
    } 
    else { 
     $('#content').data('scroll', scroll + 5); 
     scroll = $('#view').data('scroll'); 
    } 
    /* 
    console.log({ 
     'window scroll':$('window').scrollTop(), 
     'scroll var': scroll, 
     'view scroll':$('#view').scrollTop(), 
     'view height':$('#view').height(), 
     'ls': last_scroll 
    }); 
    //*/ 
    if(last_scroll != $('#content').scrollTop()){ //check for new scroll 
     last_scroll = $('#content').scrollTop() 
     $('#content').scrollTop($('#content').scrollTop() + scroll); 

     $(this).scrollTop(0); 
     //console.log(e, 'scrolling'); 
    } 

}) 

Es un buggy poco, pero es un comienzo :-)

Answer 5

Si lo que desea es tener un posicionado "div" fija y desplazarse solamente que, tal vez usted podría utilizar un truco como:

http://jsfiddle.net/3cpvT/

Desplazarse con la rueda del mouse y todo tipo de teclas funciona como se esperaba. Lo único es que la barra de desplazamiento está solo en el cuerpo del documento.

Answer 6

Encontré una solución ... No perfecto ... http://jsfiddle.net/fGjUD/6/.

CSS:

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

JS (jQuery):

if ($("body").height() > $(window).height()) { 
    var top; 
    $('#scrolldiv').mouseenter(function() { 
     top = $(window).scrollTop(); 
     $('body').addClass('noscroll').css({top: -top + 'px'}); 
    }).mouseleave(function() { 
     $('body').removeClass('noscroll'); 
     $(window).scrollTop(top); 
    }); 
} 

El texto problema de envoltura puede ser resuelto poner todo el contenido en el div de ancho fijo. Hay otro error para el navegador IE. Si la página tiene un fondo alineado al centro, se moverá de izquierda a derecha en el mouseenter en #scrolldiv