jQueryのサイズを変更する（）原因画面のちらつきやdiv要素が

Question

背景オフセット：私はそうのようにマウスのスクロールアップおよびマウスのスクロールダウンを使用してマップの種類をスクロールすることを可能にするシステムを作成しようとしています

を：

------- 
|  | 
| 1 | 
|  | 
------- 
------- ------- ------- ------- 
|  | |  | |  | |  | 
| 2 | | 3 | | 4 | | 5 | 
|  | |  | |  | |  | 
------- ------- ------- ------- 
           ------- 
           |  | 
           | 6 | 
           |  | 
           ------- 

上記の各ボックスは、javascriptでブラウザの高さと幅にリセットされます。マウスを上下にスクロールすると、ブラウザはマップ内の同じ位置にスクロールします（div 1から2までなど）。このポジショニングは、スクロール機能を使用して設定されます。スクロール機能は、マウススクロールを聴き、適切なパディングを上に追加し、余白を左に追加して上のマップの錯覚を作成します。ここで

は、それにcodepenさ：

http://codepen.io/lorenzoi/pen/mxejJ

そして、ここではそれまでのjavascriptです：

$(function(){ 

    $(window).on('resize', function(){ 
     var $divs = $('.vertical, .horizontal > div'), 
     ww = $(this).width(), 
     wh = $(this).height(); 

     $divs.css({ 
      height : wh, 
      width : ww 
     }); 

     $('.horizontal').each(function(){ 
      var $container = $(this), 
      nbChildren = $container.children().length; 
      posY = $container.offset().top, 


      $container.css({ 
       height: ww*(nbChildren-1) + wh, 
       width: ww*(nbChildren) 
      }); 
     }); 
    }).trigger('resize'); 

    $(window).on('scroll', function(){ 
     var wh = $(window).height(), 
     scroolTop = $(window).scrollTop(); 

     $('.horizontal').each(function(){ 
      var $container = $(this), 
      posY = $container.offset().top, 
      height = $container.height(), 
      nbChildren = $container.children().length, 
      marginMax = $container.width()/nbChildren*(nbChildren-1), 
      marginL = scroolTop - posY; 

      if(marginL<0) marginL = 0; 
      else if (marginL>marginMax) marginL = marginMax; 
      $container.css('marginLeft', -marginL); 
      $container.css('paddingTop', marginL); 
     }); 
    }).trigger('scroll'); 

}); 

問題：ウィンドウのサイズを変更

は奇妙なを作成しますdiv 2から5のスクロール関数が呼び出されたときに修正されるdivオフセットこれらのdivには、スクロール機能が呼び出されたときにのみオフセットされて固定されるように見えます。

.trigger（ 'resize'）;はい、いつも呼ばれるべきですか？スクロール機能が作られたときにだけ呼び出される理由はわかりません。

これをどのように修正できますか？

Answer 1

だけで十分なはずです：

$(function(){ 
    var timeoutResize; 

    $(window).on('resize', function(){ 
     clearTimeout(timeoutResize); 
      timeoutResize = setTimeout(function(){ 
      var $divs = $('.vertical, .horizontal > div'), 
      ww = $(this).width(), 
      wh = $(this).height(); 

      $divs.css({ 
       height : wh, 
       width : ww 
      }); 

      $('.horizontal').each(function(){ 
       var $container = $(this), 
       nbChildren = $container.children().length; 
       posY = $container.offset().top, 


       $container.css({ 
        height: ww*(nbChildren-1) + wh, 
        width: ww*(nbChildren) 
       }); 
      }); 
     },100); 
    }).trigger('resize'); 

    ... 

}); 

Answer 2

あなたがあまりにも頻繁に実行されているイベントハンドラを持っている場合は、このようにそれを絞ることができます：あなたはそれを割り当てるときに

function throttle(ms, fn) { 
    var allow = true; 
    function enable() { 
     allow = true; 
    } 
    return function(e) { 
     if (allow) { 
      allow = false; 
      setTimeout(enable, ms); 
      fn.call(this, e); 
     } 
    } 
} 

その後throttleにあなたのハンドラを渡します。あなたが提供する最初の引数に基づいて、たいていnミリ秒ごとに1回実行される関数を返します。タイマーを使う

$(window).resize(throttle(100, function(e) { 
    // do heavy work 
})); 

Answer 3

。 。ユーザーがウィンドウを垂直方向にサイズ変更すると、スクロール位置が影響を受け、バックグラウンドスクロールにも影響することを考慮する必要があります（現在のスクロール位置に基づいているため）。

。 。最も単純な修正は、サイズ変更ハンドラのコードの最後に$(window).trigger('scroll');と呼ぶだけなので、DRYにしておきます。私はこの変更をmy CodePen forkにしました。見てみな。