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>