8

これはリンクです参考のためにこのサイトの
http://readwrite.com/2013/02/07/robert-scoble-favorite-apps-facebook-gmail-youtube
中央セクションをスクロールすると中央セクションと右セクションの両方が同時にスクロールされます...
私はこのコードで同じように行われます：-

これはhtmlコードです：-

<div id="left" class="linked">
<img height="600" src="http://www.visitingdc.com/images/eiffel-tower-picture.jpg">
</div>
<div id="right" class="linked">
<img  src="http://www.visitingdc.com/images/eiffel-tower-picture.jpg">
</div><br>

脚本：-

$(function(){

    $('.linked').scroll(function(){
        $('.linked').scrollTop($(this).scrollTop());    
    })

})

css：-

<br>#left { width: 300px; height: 400px; overflow: scroll; float: left; }
#right { width: 300px; height: 400px; overflow: scroll; float: left; }

しかし、私には少し問題があります。
上記のサイトでは、両方が一度にスクロールしますが、右側はスクロールが遅くなります。
私を助けてください...

4

2 に答える 2

0

これらのdivの1つ（js内）のスクロール動作を上書きし、たとえば他のdivの0.5に設定する必要があります。ここを見てください：http： //net.tutsplus.com/tutorials/html-css-techniques/simple-parallax-scrolling-technique/

于 2013-02-22T10:39:25.530 に答える
0

http://jsfiddle.net/cuVC7/0/

このソリューションをご覧ください。あまり普遍的ではありませんが、それはあなたに良いスタートを与えることができます。divフィドルのCSS部分で高さを変更すると、右の速度が自動的に調整されます。

このような2D視差関連の問題には、基本的な数学の知識が必要であることに注意してください。上記のサンプルでは、​​このモデルを使用しています。

  • ページのスクロールを決定して、残りのスクロール量がわかるようにしますdiv。
  • ページの高さ、ウィンドウの高さ、および左の高さの知識を使用して、相対スクロールdivを計算します。つまり、0から1までの値は、ページがまったくスクロールされていないか、ある程度スクロールされているか、最後までスクロールされているかを示します。
  • 相対スクロールをウィンドウサイズに関して低速レイヤーの寸法にマップして、低速レイヤーの正確なスクロールを決定します。
于 2013-02-23T10:13:35.827 に答える