1

I get an issue using scrollLeft in jQuery, I'd like to scroll a fixed header in same times to the body element but the header is longer than the body so there is an issue at the end of the scroll with the width property...

JSFiffle : JSFiddle using SCSS and jQuery

My 

( 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);
.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;
              }
            }
          }
        }
      }
    }
  }
}
        <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>

code :

tonymx227
  • 5,293
  • 16
  • 48
  • 91
  • You should provide your code outside of the JSFiddle aswell – Gerwin Nov 14 '14 at 15:04
  • they are the same size, just the body has a scrollbar (which is inline) causes to look smaller. you should check if the scrollbar for the body is visible and then adjust your header's width accordingly. – Roni Tovi Nov 14 '14 at 15:10
  • Ok and is there any solutions to stop the scroll ? – tonymx227 Nov 14 '14 at 15:11
  • stop the scroll? no, I don't think you would want it. you just need to check if the scrollbar is visible on the body. and if it's visible, then lower the width of your head. you are done. – Roni Tovi Nov 14 '14 at 15:13
  • You can take a look at this question: http://stackoverflow.com/questions/4814398/how-can-i-check-if-a-scrollbar-is-visible – Roni Tovi Nov 14 '14 at 15:14
  • Umm this is not the issue, the problem is that there is a gap at the end of the scroll... Take a look on the JSFiddle and look at slowly at the end... The header is moved to the left like 10px to the left... – tonymx227 Nov 14 '14 at 15:18
  • Right and what he is saying is the reason is because the slider knows it can go farther because the header is technically not on the screen (past the vertical scroll bar) and thus it lets you move over more and thus pushing your rows to the left. – Simply Craig Nov 14 '14 at 15:25
  • Yes and this is the issue... – tonymx227 Nov 14 '14 at 15:26
  • Can you accept the answer so others know this is resolved. @tonymx227 – Simply Craig Nov 14 '14 at 18:14

1 Answers1

0

* UPDATED * Ok so leave the header where it is, but add overflow:hidden as suggested in the comments

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

Working JSFiddle for what you want: http://jsfiddle.net/gj7ejp10/7/

Simply Craig
  • 1,084
  • 1
  • 10
  • 18