使用jQuery滚动问题

Question

我在jQuery中使用scrollLeft时出现问题，我想将固定标题同时滚动到body元素但是标题比body更长，所以最后会出现问题具有width属性的滚动...

JSFiffle：JSFiddle using SCSS and jQuery

我的

＆＃13;

＆＃13;

( function($){
  $(document).ready( function(){
    function resizeHeader(){
      var fixedCell = document.querySelector('.grid4 .fixed').children;
      for( var i = 0; i < fixedCell.length; i++ ){
        var newWidth = fixedCell[i].offsetWidth;
        document.querySelector('.grid4 .cloned').children[i].style.width = newWidth;
      }
    }
    resizeHeader();
    $('.grid4 .scroll').scroll( function(){
      var $this = $(this);
      $('.grid4 .cloned').animate({
        scrollLeft: $this.scrollLeft()
      },0);
    });
  });
})(jQuery);

＆＃13;

.grid4{

  .grid{
    position: relative;

    .wrap{
      position: absolute;
      top: 20px;
      left: 0;
      height: 200px;
      width: 150px;

      .scroll{
        height: 100%;
        width: 100%;
        overflow-x: auto;

        .table{
          display: table;
          table-layout: fixed;
          margin: -20px 0 0 0;

          .header{
            display: table-header-group;
            background-color: green;

            .row{
              display: table-row;

              .cell{
                display: table-cell;
              }
            }

            .cloned{
              position: absolute;
              left: 0;
              top: -20px;
              background-color: red;
              display: table-row;
              width: 150px;
              overflow-x: hidden;
            }
          }

          .body{
            display: table-row-group;
            background-color: red;

            .row{
              display: table-row;

              .cell{
                display: table-cell;
                text-overflow: ellipsis;
              }
            }
          }
        }
      }
    }
  }
}

＆＃13;

        <div class="grid4">
          <div class="grid">
            <div class="wrap">
              <div class="scroll">
                <div class="table">
                  <div class="header">
                    <div class="row fixed">
                      <div class="cell" style="width: 100px;">Colonne</div>
                      <div class="cell">Colonne</div>
                      <div class="cell">Colonne</div>
                      <div class="cell">Colonne</div>
                      <div class="cell">Colonne</div>
                      <div class="cell">Colonne</div>
                    </div>
                    <div class="row cloned">
                      <div class="cell">Colonne</div>
                      <div class="cell">Colonne</div>
                      <div class="cell">Colonne</div>
                      <div class="cell">Colonne</div>
                      <div class="cell">Colonne</div>
                      <div class="cell">Colonne</div>
                    </div>
                  </div>
                  <div class="body">
                    <div class="row">
                      <div class="cell">Ligne #1</div>
                      <div class="cell">Ligne #1</div>
                      <div class="cell">Ligne #1</div>
                      <div class="cell">Ligne #1</div>
                      <div class="cell">Ligne #1</div>
                      <div class="cell">Ligne #1</div>
                    </div>
                    <div class="row">
                      <div class="cell">Ligne #4</div>
                      <div class="cell">Ligne #4</div>
                      <div class="cell">Ligne #4</div>
                      <div class="cell">Ligne #4</div>
                      <div class="cell">Ligne #4</div>
                      <div class="cell">Ligne #4</div>
                    </div>
                    <div class="row">
                      <div class="cell">Ligne #1</div>
                      <div class="cell">Ligne #1</div>
                      <div class="cell">Ligne #1</div>
                      <div class="cell">Ligne #1</div>
                      <div class="cell">Ligne #1</div>
                      <div class="cell">Ligne #1</div>
                    </div>
                    <div class="row">
                      <div class="cell">Ligne #2</div>
                      <div class="cell">Ligne #2</div>
                      <div class="cell">Ligne #2</div>
                      <div class="cell">Ligne #2</div>
                      <div class="cell">Ligne #2</div>
                      <div class="cell">Ligne #2</div>
                    </div>
                    <div class="row">
                      <div class="cell">Ligne #3</div>
                      <div class="cell">Ligne #3</div>
                      <div class="cell">Ligne #3</div>
                      <div class="cell">Ligne #3</div>
                      <div class="cell">Ligne #3</div>
                      <div class="cell">Ligne #3</div>
                    </div>
                    <div class="row">
                      <div class="cell">Ligne #4</div>
                      <div class="cell">Ligne #4</div>
                      <div class="cell">Ligne #4</div>
                      <div class="cell">Ligne #4</div>
                      <div class="cell">Ligne #4</div>
                      <div class="cell">Ligne #4</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

＆＃13;

＆＃13;

＆＃13;

代码：

Answer 1

*更新* 好的，请将标题保留原样，但按照评论中的建议添加overflow:hidden

.cloned{
    position: absolute;
    left: 0;
    top: -20px;
    background-color: red;
    display: table-row;
    width: 133px; // Should be 133px not 132px
    overflow: hidden; // ADD
 }

根据需要使用JSFiddle：http://jsfiddle.net/gj7ejp10/7/