1

これが私が取り組んできたものです。少し下にスクロールすると、下にスクロールするにつれて配置が徐々にずれていくのがわかる以外は、すべてうまく機能しています。divはdivと同じ距離を#left移動する必要がありますが、時間の経過とともに、ボックスが交差する場所が含まれている..css('top')#rightscrollTop()div#innerScroller

カエルが最初に並んでいる場所と、2 番目に表示されたときに並んでいる場所を比較すると、私の問題がわかります。

ハンドルバーのことは気にしないでください...関連する JS は非常に小さいです。

  var left = $('#left');
  var leftHeight = left.height();
  var leftTop =  0 - leftHeight + $('#right').height();
  left.css('top', leftTop + 'px');
  
  $('#right').on('scroll', function(){
    
    var scro = parseFloat($('#right').scrollTop());

    var goal = leftTop + scro;

    left.css('top', goal + 'px');
    
  });

ありがとう！

編集：

言うまでもなく、これは機能しますが、非常にハックであり、私が探している種類のソリューションではありません:

var scro = (parseFloat($('#right').scrollTop())) * 1.062;

4

1 に答える 1

2

実際には2つの問題があります。

<p>最初の問題は、左側のすべてのタグです。この回答を参照してください: <p> タグ HTML の上下のスペースを削除してください

最も単純な CSS 修正は次のとおりです。

p {
    margin: 0;
    padding: 0;
}

この修正の後、2 つの側面はより密接に並んでいますが、まだわずかにずれています。コンソール出力を見ると、右側がまだ 4 ピクセルスクロールしすぎています。これは、HTML の空白を無視する場合によくある問題です。追加する場合:

#right {
    font-size: 0;
}

余分なスペースがなくなり、すべてが完璧に整列します!

于 2013-09-03T21:09:56.347 に答える