I have two tables, one is a table with just the table headers, the other table contains all the table data. Both tables are inside their own separate divs. I'm trying to make it so that scrolling horizontally on the table data div will trigger an event in JavaScript that will scroll the table header div at the same rate. I know I could get rid of the divs and just have one table with sticky headers, but I want to try to do it this way. Here's a simplified version of code that I thought would work:

HTML:

<div id = "div1">
  <table id = "stickyheaders" class = "table table-condensed table-striped small">
    <thead><tr>
      <th>header1</th>
      <th>header2</th>
      <th>header3</th>
      <th>header4</th>
      <th>header5</th>
      <th>header6</th>
      <th>header7</th>
      <th>header8</th>
      <th>header9</th>
      <th>header10</th>
    </tr></thead>
  </table>
</div>

<div id = "div2">
  <table id = "tablebody" class = "table table-condensed table-striped small">
    <tbody>
      <tr>
        <td>data1</td>
        <td>data2</td>
        <td>data3</td>
        <td>data4</td>
        <td>data5</td>
        <td>data6</td>
        <td>data7</td>
        <td>data8</td>
        <td>data9</td>
        <td>data10</td>
      </tr>
    </tbody>
  </table>
</div>

JavaScript:

$(document).ready(function() {
    $('#div2').on('scroll', function () {
        $('#').scrollLeft($(this).scrollLeft());
    });
} )();

And here's the fiddle

Am I missing something stupid here? Thanks in advance for your help. I know this is similar to another question asked here, but that one doesn't have an answer and didn't really help me out.

I have two tables, one is a table with just the table headers, the other table contains all the table data. Both tables are inside their own separate divs. I'm trying to make it so that scrolling horizontally on the table data div will trigger an event in JavaScript that will scroll the table header div at the same rate. I know I could get rid of the divs and just have one table with sticky headers, but I want to try to do it this way. Here's a simplified version of code that I thought would work:

HTML:

<div id = "div1">
  <table id = "stickyheaders" class = "table table-condensed table-striped small">
    <thead><tr>
      <th>header1</th>
      <th>header2</th>
      <th>header3</th>
      <th>header4</th>
      <th>header5</th>
      <th>header6</th>
      <th>header7</th>
      <th>header8</th>
      <th>header9</th>
      <th>header10</th>
    </tr></thead>
  </table>
</div>

<div id = "div2">
  <table id = "tablebody" class = "table table-condensed table-striped small">
    <tbody>
      <tr>
        <td>data1</td>
        <td>data2</td>
        <td>data3</td>
        <td>data4</td>
        <td>data5</td>
        <td>data6</td>
        <td>data7</td>
        <td>data8</td>
        <td>data9</td>
        <td>data10</td>
      </tr>
    </tbody>
  </table>
</div>

JavaScript:

$(document).ready(function() {
    $('#div2').on('scroll', function () {
        $('#').scrollLeft($(this).scrollLeft());
    });
} )();

And here's the fiddle

Am I missing something stupid here? Thanks in advance for your help. I know this is similar to another question asked here, but that one doesn't have an answer and didn't really help me out.

• javascript
• jquery
• html

• You are missing the $('#id') here. – Praveen Kumar Purushothaman Commented Jul 14, 2016 at 15:43

2 Answers 2

You are missing the core scrolling stuff. Replace the $('#') with the right id and remove the () at the end. And yea, add jQuery:

$(document).ready(function() {
  $('#div2').on('scroll', function() {
    $('#div1').scrollLeft($(this).scrollLeft());
  });
});

#div1 {
  width: 50%;
  height: 40px;
  padding: 10px;
  border: 1px solid #c0c0c0;
  border-radius: 5px;
  overflow-y: auto;
  overflow-x: auto;
  label {
    display: block;
  }
  tr:after {
    content: ' ';
    display: block;
    visibility: auto;
    clear: both;
  }
}
#div2 {
  width: 50%;
  height: 50px;
  padding: 10px;
  border: 1px solid #c0c0c0;
  border-radius: 5px;
  overflow-y: auto;
  overflow-x: auto;
  label {
    display: block;
  }
  tr:after {
    content: ' ';
    display: block;
    visibility: auto;
    clear: both;
  }
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div1">
  <table id="stickyheaders" class="table table-condensed table-striped small">
    <thead>
      <tr>
        <th>header1</th>
        <th>header2</th>
        <th>header3</th>
        <th>header4</th>
        <th>header5</th>
        <th>header6</th>
        <th>header7</th>
        <th>header8</th>
        <th>header9</th>
        <th>header10</th>
      </tr>
    </thead>
  </table>
</div>

<div id="div2">
  <table id="tablebody" class="table table-condensed table-striped small">
    <tbody>
      <tr>
        <td>data1</td>
        <td>data2</td>
        <td>data3</td>
        <td>data4</td>
        <td>data5</td>
        <td>data6</td>
        <td>data7</td>
        <td>data8</td>
        <td>data9</td>
        <td>data10</td>
      </tr>
    </tbody>
  </table>
</div>

Scrolling on the bottom div will scroll the top one. Add jQuery to the jsFiddle.

Fiddle: https://jsfiddle/2xt1p8t7/

I came across this while trying to answer my own question.

Slightly expanded solution. I was trying to link two divs in a similar manner, so that one scrolled with the other. Here is the initial code (both divs had a class called joinscroll).

$('.joinscroll').on('scroll touchmove mousemove', function(e){
  if ($(this).attr("id") == "topdiv")  { $('#bottomdiv').scrollLeft($(this).scrollLeft()); }
  if ($(this).attr("id") == "bottomdiv")  { $('#topdiv').scrollLeft($(this).scrollLeft()); }
})

The problem that I had was that during scrolling, the scroll on the div being scrolled by the function was being detected by the browser, which was causing the function to be executed for that div's scroll. This caused really jerky scrolling, basically because there was a feedback loop.

I tried tricks with preventDefault and stopPropagation, but they didn't work.

In the end, the simplest solution was to detect which div the mouse was hovering over and use that to suppress the other function:

$('.joinscroll').on('scroll touchmove mousemove', function(e){
if ($(this).is(':hover')) {
  if ($(this).attr("id") == "topdiv")  { $('#bottomdiv').scrollLeft($(this).scrollLeft()); }
  if ($(this).attr("id") == "bottomdiv")  { $('#topdiv').scrollLeft($(this).scrollLeft()); }
}  
})

Hope this helps somebody.