23

scrollTopとプロパティについて質問がありscrollLeftます。JavaScript (jQuery) を使用せずに、div でこれらのプロパティを設定したいと思います。これは可能ですか？

私の問題は、HTMLコードを解釈するプログラムがあり、プログラムがコードを解釈するときにスクロールしたdivの値がゼロになることです。scrollTopプログラムはまたはのscrollLeft値を読み取ることができません。次のような HTML タグが存在します。

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

1 に答える 1

41

残念ながら、これは CSS/HTML だけでは不可能です。

編集 [05.01.2012] - 可能な解決策

次のブラウザーで動作するソリューションを作成しました。

  • Firefox 4+
  • サファリ 5+
  • クローム 6+
  • オペラ 11+
  • IE10+
  • Android 2.3 以降

これは本当にちょっとハックなので、使用するかどうかを検討してください。:)

少し説明

-fieldで HTML5 属性を使用しautofocusました。<input>これにより入力がフォーカスされるため、ビューポートに入力する必要があります。そのため、指定された位置までスクロールします。強調表示されたアウトラインを取り除き、入力をまったく表示しないようにするには、いくつかのスタイルを設定する必要があります。しかし、それでも Safari には 1 つの点滅ピクセルが必要だったので、オーバーレイのように機能するスパンでトリックを行いました。これはオートフォーカスをトリガーしないため、単純に使用できないことに注意してくださいdisplay: none（これはSafariでのみテストされています）。

デモ

デモは、Safari と Chrome でのみ実行されます。IE と Firefox は、<iframe>.

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;
}
<div class="outer">
  <div class="inner">
    <input type="text" autofocus></input>
    <span></span>
  </div>
</div>

于 2013-01-03T12:45:06.187 に答える