web-dev-qa-db-ja.com

JavaScriptを使用せずにscrollTopとscrollLeftを設定します

ScrollTopおよびscrollLeftプロパティについて質問があります。 JavaScript（jquery）を使用せずにdivでこれらのプロパティを設定したいと思います。これは可能ですか？私の問題は、HTMLコードを解釈するプログラムがあり、プログラムがコードを解釈するときにスクロールしたdivの値がゼロになることです。プログラムはscrollTopまたはscrollLeft値を読み取ることができません。次のようなHTMLタグが存在します。

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

これはCSS/HTMLのみでは不可能だと思います。

編集[2012年5月1日]-可能な解決策

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

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

それは本当に少しハックですので、それを使用するかどうかを確認してください。 :)

ちょっとした説明

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

デモ

購入前に試す

デモはSafariで実行され、Chromeのみ。IEとFirefoxは<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