div - establece scrollTop y scrollLeft sin javascript

scrolltop javascript

Question

Tengo una pregunta sobre las propiedades scrollTop y scrollLeft. Me gustaría establecer estas propiedades en mi div sin usar JavaScript (jquery). es posible? Mi problema es que tengo un programa que interpreta el código HTML y los divs que he desplazado tienen el valor cero cuando el programa interpreta el código. El programa no puede leer el valor scrollTop o scrollLeft. Existe una etiqueta HTML como:

<div scrollLeft="300" scrollTop="200"></div>

Answer 1

Me temo que esto no es posible usando CSS / HTML solamente.

Editar [05.01.2012] - Una posible solución

He creado una solución que funciona en los siguientes navegadores:

• Firefox 4+
• Safari 5+
• Chrome 6+
• Opera 11+
• IE 10+
• Android 2.3+

Es realmente un poco intrincado, así que fíjate si lo usarías o no. :)

Una pequeña explicación

Utilicé el atributo autofocus HTML5 en un campo <input> . Como esto enfocará la entrada, tiene que introducirla en la ventana gráfica. Para ello se desplazará a la posición dada. Para deshacerse del contorno resaltado y para no ver la entrada, debe configurar algunos estilos. Pero esto todavía obligó a Safari a tener un píxel parpadeante, así que hice el truco con el lapso, que actúa como una superposición. Tenga en cuenta que no puede simplemente usar display: none ya que esto no activará el enfoque automático (solo lo probé en Safari).

Manifestación

Prueba antes de comprar

La demostración solo se ejecutará en Safari y Chrome. Parece que IE y Firefox no activan el enfoque automático en un <iframe> .

CSS

div.outer {
height: 100px;
width: 100px;
overflow: auto;
}
div.inner {
position: relative;
height: 500px;
width: 500px;
}
div.inner > input {
width: 1px;
height:1px;
position: absolute;
z-index: 0;
top: 300px;
left: 200px;
border:0;
outline:0;
}
div.inner > span {
width: 1px;
height:1px;
position: absolute;
z-index: 1;
top: 300px;
left: 200px;
background: white;
}

HTML

<div class="outer">
<div class="inner">
<input type="text" autofocus></input>
<span></span>
</div>
</div>