2

私は少しばかりの jQuery 初心者で、最近始めたばかりです。

http://flesler.blogspot.com.au/2007/10/jqueryscrollto.html (Ariel Flesler の scrollTo プラグイン)を使用しています。

横スクロールのサイトです。

ウィンドウのサイズが変更されたときに、ウィンドウの左側に最も近い要素にスクロールしようとしています。

配列の最初の要素までスクロールすることしかできないように見えるので、ウィンドウのサイズを変更すると、ウィンドウがどこにあるかに関係なく、ウィンドウはフローの最初の「.example」にスクロールします。

更新:いくらか進歩しました。スクロールした距離を計算する新しい変数を追加しました。ある要素から次の要素にジャンプするか、まったくジャンプしないように見えるため、「if」ステートメントでループの最小値を使用する方法を見つける方法が必要なようです。

これ"Uncaught TypeError: Cannot read property 'slice' of undefinedは、scrollTo の値が負であることが原因でした (0 はドキュメントの先頭であるため、0 未満にスクロールすることはできません)。これを修正するために、これまでにスクロールされた量の値を追加し、任意の値を追加しました。 element_position を正しく計算する必要がありました。

更新 2:数学に問題がありました。解決策を反映するように質問が更新されました。唯一の問題は、流動的なレイアウトであるため、if ステートメントで "70" などの固定値を使用すると、特定の時点でそれが壊れる傾向があることです。

jQuery

$(document).ready(function(){
   $(window).resize(function() {
      $('.example').each(function(index) {
          var example = $(this);
          var scroll_position = $('#container').scrollLeft();
      var element_position = example.offset().left;

          if (element_position < 70 && position > -70) {
              $('#container').scrollTo(scroll_position + element_position);
          }
      });
   });
});

HTML

<div id="container">
   <div class="example"></div>
   <div class="example"></div>
   <div class="example"></div>
   <div class="example"></div>
   <div class="example"></div>
   <div class="example"></div>
</div>

次のエラーも表示されます

"Uncaught TypeError: Cannot read property 'slice' of undefined
4

1 に答える 1

1

これを試してください：

$(document).ready(function(){
   $(window).resize(function() {
      var scroll_position = $('#container').scrollLeft();
      $('.example').each(function() {
          var example = $(this);
          var left = example.offset().left;
          var right = left + example.width();

          if (right > 0) {
              $('#container').scrollTo(scroll_position + left);
              return false;
          }
      });
   });
});​

選択した要素の中で、ビューポートで右の境界線を持つ最初の要素をチェックします。

于 2012-10-15T18:04:46.263 に答える