12

私は2つのDIV要素を持ってい#pageます#block:

<div id="page"></div>
<div id="block"></div>

#block要素には固定位置とoverflow:hiddenプロパティを持つ長いコンテンツがあります。

#page要素にもいくつかのコンテンツがありますが、高さは高さ#pageよりも長くまたは短くなり#blockます。

私の目標は、この 2 つの要素の間で同期スクロールを実現することです。このようなもの：

ここに画像の説明を入力

#blockと のヘッダー要素とフッター要素は、スクロールの最初と最後で同じ位置にある必要があるため、要素のスクロール#pageの#block速度を計算する必要があります。

私がこれを達成しようとした方法：

  • #page要素の計算された高さ
  • 要素コンテンツの計算された高さ#block(ブロック要素は固定されており、常に高さが固定されているため)

  • 計算#blockされた要素のスクロール速度:

    $("#block").outerHeight / $("#page").outerHeight

  • .scrollTop()のトリガー#block

最初から機能しており、#block要素のスクロールは要素のスクロールよりも高速です#pageが、最後に#blockは完全にスクロールされません。

ここに私の JsFiddle があります: http://jsfiddle.net/zur4ik/bQYrf/2/

多分誰かが私が間違っていることを見ることができますか?

前もって感謝します。

4

3 に答える 3

3

SOですでに回答されているこの同じ質問の2つの例を見つけました：

あなたの質問が正しく理解できれば、これはまさにあなたが探しているものです: jQueryを使用した同期スクロール?

これも良い解決策です: 2 つの div のスクロール位置を同期するにはどうすればよいですか?

于 2013-11-05T10:11:13.793 に答える
1 
function getClientHeight()
{
  return document.compatMode=='CSS1Compat' && !window.opera?document.documentElement.clientHeight:document.body.clientHeight;
}

var clientHeight = getClientHeight();

$(window).scroll(function() {

    var diff = ($("#blockLength").height() - clientHeight) / ($("#page").height() - clientHeight);
    var blocktoSet = $(window).scrollTop() * diff;

    $("#block").scrollTop(blocktoSet);

    console.log()



});

http://jsfiddle.net/PeGky/1/

于 2013-11-05T10:14:49.530 に答える