попробуйте использовать jquery.doubleScrollплагин

jQuery:

$(document).ready(function(){
  $('#double-scroll').doubleScroll();
});

CSS

#double-scroll{
  width: 400px;
}

HTML

<div id="double-scroll">
  <table id="very-wide-element">
    <tbody>
      <tr>
        <td></td>
      </tr>
    </tbody>
  </table>
</div>

прежде всего отличный ответ @StanleyH Если кому-то интересно, как сделать контейнер двойной прокрутки с динамической шириной

css

.wrapper1, .wrapper2 { width: 100%; overflow-x: scroll; overflow-y: hidden; }
.wrapper1 { height: 20px; }
.div1 { height: 20px; }
.div2 { overflow: none; }

js

$(function () {
    $('.wrapper1').on('scroll', function (e) {
        $('.wrapper2').scrollLeft($('.wrapper1').scrollLeft());
    }); 
    $('.wrapper2').on('scroll', function (e) {
        $('.wrapper1').scrollLeft($('.wrapper2').scrollLeft());
    });
});
$(window).on('load', function (e) {
    $('.div1').width($('table').width());
    $('.div2').width($('table').width());
});

html

<div class="wrapper1">
    <div class="div1"></div>
</div>
<div class="wrapper2">
    <div class="div2">
        <table>
            <tbody>
                <tr>
                    <td>table cell</td>
                    <td>table cell</td>
                    <!-- ... -->
                    <td>table cell</td>
                    <td>table cell</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

демо

http://jsfiddle.net/simo/67xSL/

вы можете использовать плагин jquery, который сделает работу за вас:

• https://github.com/avianey/jqDoubleScroll

плагин будет обрабатывать всю логику для вас...

Без JQuery (2017)

потому что вам может не понадобиться JQuery, вот рабочая версия Vanilla JS, основанная на ответе @StanleyH:

var wrapper1 = document.getElementById('wrapper1');
var wrapper2 = document.getElementById('wrapper2');
wrapper1.onscroll = function() {
  wrapper2.scrollLeft = wrapper1.scrollLeft;
};
wrapper2.onscroll = function() {
  wrapper1.scrollLeft = wrapper2.scrollLeft;
};

#wrapper1, #wrapper2{width: 300px; border: none 0px RED;
overflow-x: scroll; overflow-y:hidden;}
#wrapper1{height: 20px; }
#wrapper2{height: 100px; }
#div1 {width:1000px; height: 20px; }
#div2 {width:1000px; height: 100px; background-color: #88FF88;
overflow: auto;}

<div id="wrapper1">
    <div id="div1">
    </div>
</div>
<div id="wrapper2">
    <div id="div2">
    aaaa bbbb cccc dddd aaaa bbbb cccc 
    dddd aaaa bbbb cccc dddd aaaa bbbb 
    cccc dddd aaaa bbbb cccc dddd aaaa 
    bbbb cccc dddd aaaa bbbb cccc dddd
    </div>
</div>

насколько я знаю, это невозможно с HTML и CSS.

на основе решения @StanleyH я создал директива AngularJS, скачать jsFiddle.

простота в использовании:

<div data-double-scroll-bar-horizontal> {{content}} or static content </div>

jQuery не требуется.

расширяя ответ Стэнли и пытаясь найти минимально необходимый, вот что я реализовал:

JavaScript (вызывается один раз откуда-то вроде $(document).готов()):

function doubleScroll(){
        $(".topScrollVisible").scroll(function(){
            $(".tableWrapper")
                .scrollLeft($(".topScrollVisible").scrollLeft());
        });
        $(".tableWrapper").scroll(function(){
            $(".topScrollVisible")
                .scrollLeft($(".tableWrapper").scrollLeft());
        });
}

HTML-код(обратите внимание, что ширина будет изменять длину полосы прокрутки):

<div class="topScrollVisible" style="overflow-x:scroll">
    <div class="topScrollTableLength" style="width:1520px; height:20px">
    </div>
</div>
<div class="tableWrapper" style="overflow:auto; height:100%;">
    <table id="myTable" style="width:1470px" class="myTableClass">
...
    </table>

вот именно.

связывание скроллеров работало, но в том, как это написано, он создает цикл, который замедляет прокрутку в большинстве браузеров, если вы нажимаете на часть более легкой полосы прокрутки и удерживаете ее (не при перетаскивании скроллера).

я исправил его с флагом:

$(function() {
    x = 1;
    $(".wrapper1").scroll(function() {
        if (x == 1) {
            x = 0;
            $(".wrapper2")
                .scrollLeft($(".wrapper1").scrollLeft());
        } else {
            x = 1;
        }
    });


    $(".wrapper2").scroll(function() {
        if (x == 1) {
            x = 0;
            $(".wrapper1")
                .scrollLeft($(".wrapper2").scrollLeft());
        } else {
            x = 1;
        }
    });
});

В vanilla Javascript / Angular вы можете сделать это так:

scroll() {
    let scroller = document.querySelector('.above-scroller');
    let table = document.querySelector('.table');
    table.scrollTo(scroller.scrollLeft,0);
  }

HTML:

<div class="above-scroller" (scroll)="scroll()">
  <div class="scroller"></div>
</div>
<div class="table" >
  <table></table>
</div>

CSS:

.above-scroller  {
   overflow-x: scroll;
   overflow-y:hidden;
   height: 20px;
   width: 1200px
 }

.scroller {
  width:4500px;
  height: 20px;
}

.table {
  width:100%;
  height: 100%;
  overflow: auto;
}

Если вы используете iscroll.js в браузере webkit или мобильном браузере, вы можете попробовать:

$('#pageWrapper>div:last-child').css('top', "0px");

существует проблема с направлением прокрутки: rtl. Кажется, плагин не поддерживает его правильно. Вот скрипка: jsfiddle.net/qsn7tupc/3

обратите внимание, что он работает правильно в Chrome, но во всех других популярных браузерах направление верхней полосы прокрутки остается слева.