3

次のスクリプトを使用して、スクロールバーの位置を確認します

$(window).scroll(function(){
    jQuery('.scroll').html(document.body.scrollTop);
});

<div class="scroll"></div>

div内のスクロールの位置のpxを出力するだけなのですが、なぜか位置結果が毎回違う

たとえば、ブラウザ (クロム) のウィンドウを最大にして、ページを下にスクロールすると、1095px と表示されます

ウィンドウを最大化せずに下にスクロールすると、1600px と表示される

IEで開くと、1065pxと表示されます

スクロールバーの位置を計算したい場合、なんらかの理由で windowmode と browsertype に応じて異なる結果が得られます

私はここで何が間違っていますか？

ああ、私は次のスクリプトで結果を使用しています。スクロールが特定の位置にある場合は、div を表示し (アイデアです)、500px のような異なる位置に関数を設定できるスクリプトを探しています。

  if ($(window).scrollTop() >= 1000) {

    $('.showdiv').fadeIn(500);

  }

したがって、位置を正しく計算できない場合、スクリプトは機能しません:)

どんな助けでも大歓迎です

4

1 に答える 1

0

scrollTop によって返される値は、レンダリングされたウィンドウの上部から要素までの距離です。

   +-----------+     \
   |           |     |  - this distance.
+----------------- + /
|  |           |   |
|  |           |   |
|  +-----------+   |
|                  |
|                  |
|                  |
|                  |
+------------------+

高さ 1000 ピクセルの div があり、レンダリング ウィンドウが 600 ピクセルの場合、レンダリングされたエッジの上に 400 ピクセルがあります。200px のレンダリング ウィンドウがある場合、レンダリングされたエッジの上に 800px があります。

要素の上部を表示するために上にスクロールしなければならない距離と考えることができます。

ウィンドウを小さくしてこの効果を確認できる場合は、ページを 100 ピクセルまでスクロールします。

次に、ウィンドウの下部を引き下げます。スクロール バーがページの下部に到達するとすぐに、値が減少し始めることに気付くでしょう。

http://jsbin.com/ibefal/2

詳細: http://www.w3.org/TR/cssom-view/#dom-element-scrolltop

于 2013-06-06T22:14:47.693 に答える