web-dev-qa-db-fra.com

définir scrollTop et scrollLeft sans javascript

J'ai une question sur les propriétés scrollTop et scrollLeft. Je voudrais définir ces propriétés dans ma div sans utiliser JavaScript (jquery). Est-ce possible? Mon problème est que j'ai un programme qui interprète le code HTML et les divs que j'ai fait défiler ont la valeur zéro lorsque le programme interprète le code. Le programme ne peut pas lire la valeur scrollTop ou scrollLeft. Existe une balise HTML comme:

<div scrollLeft="300" scrollTop="200"></div>
javascriptcssscrolltop
20
Stephan Hofmann

Je crains que ce ne soit pas possible en utilisant uniquement CSS/HTML.

Edit [05.01.2012] - Une solution possible

J'ai créé une solution qui fonctionne dans les navigateurs suivants:

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

C'est vraiment un peu hacky, alors voyez si vous voulez l'utiliser ou non. :)

Une petite explication

J'ai utilisé l'attribut HTML5 autofocus sur un <input>-champ. Comme cela concentrera l'entrée, il doit la placer dans la fenêtre. Pour cela, il défilera jusqu'à la position donnée. Pour vous débarrasser du contour en surbrillance et pour ne pas voir l'entrée du tout, vous devez définir certains styles. Mais cela a toujours forcé Safari à avoir un pixel clignotant, alors j'ai fait l'affaire avec la durée, qui agit comme une superposition. Notez que vous ne pouvez pas simplement utiliser display: none car cela ne déclenchera pas la mise au point automatique (testé uniquement dans Safari).

Démo

Essayez avant d'acheter

La démo s'exécutera dans Safari et Chrome uniquement. IE et Firefox ne semblent pas déclencher la mise au point automatique dans 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>
37
insertusernamehere