2012-01-10 15 views
7

Esto es similar a SO: how to move a div with arrow keys, así que tal vez una clara e informada 'no' es suficiente como respuesta:div de Flecha

¿Puedo hacer un desbordamiento div un "objetivo de desplazamiento por defecto" que reacciona a la flecha hacia arriba/abajo/página abajo/espacio del mismo modo que un documento desbordado (es decir, desplaza el contenido hacia abajo)? La página en sí misma no tiene una barra de desplazamiento (ejemplo simple a continuación). En particular, ¿se puede lograr esto sin realizar un seguimiento explícito de los eventos clave (ni directamente ni ocultos por una biblioteca JS)?

<html> 
<body> 
    <div id="contentcontainer" style="height:200px;width:200px;overflow:scroll"> 
    <div id="innercontent" style="height:2000px;">foo</div> 
    </div> 
</body> 
</html> 

Editar: Por supuesto, lo anterior funciona Después de hacer clic en el div. Básicamente, quiero evitar tener que hacer eso ...

+0

han pensado en simplemente [labrar las barras de desplazamiento] (http://websitetips.com/articles/css/scrollbars/) del div y la aplicación de algún tipo de enfoque en la que –

+0

sí, pero aún necesitas enfocar el elemento div. Por qué no lo intentas, fui a un sitio y simplemente hice clic en el div desbordado, y usé las teclas, no hubo problema ... pero un "enfoque automático" no podrás lograrlo, creo ... 7 – Luke

+0

I no me importa el estilo. "Imponer algún tipo de enfoque" puede ser lo que estoy buscando ...;) ¿Cómo funcionaría? – dcn

Respuesta

-1

Los navegadores suelen tener este comportamiento incorporados,

Para utilizar las teclas de flecha para desplazarse hacia abajo a su div, debe tener un elemento dentro de la concentración.

búsqueda http://api.jquery.com/focus/

+3

Incluso después de hacer un '.focus()' en un elemento de formulario dentro de un div, Google Chrome no reconoce el div como el destino de las pulsaciones de teclas de desplazamiento de la tecla de flecha. –

9

Para que un elemento HTML para enfocable, que debe ser accesible con la tecla Tab. Esto significa que puede llamar al .focus() en un enlace o una entrada. Además, los elementos body son siempre enfocables.

Debe hacer que su div alcance con la tecla Tab. Puede lograr esto estableciendo la propiedad tabindex en él. Si no quiere que las personas realicen tabulaciones en ese div, puede establecer el tabindex en -1, lo que evitará que las personas realicen tabulaciones, pero de lo contrario configurará el elemento para tabular y enfocar.

Fuente: http://help.dottoro.com/ljpkdpxb.php

+1

Después de asegurar que div tenía un atributo tabindex, y luego llamar a div.focus(), ¡funcionó! ¡Gracias! – Josh