scroll display along with scroll on textarea

Question

I have a text area element whose content is dynamically displayed on the right. As I scroll down the textarea, I want the display to be scrolled down as well corresponding to th

Answer 1

To sync scroll between 2 (or multi) div you can use (native javascript):

  var columns = document.querySelectorAll('.column');
  for (var i = 0; i < columns.length; i++) {
      columns[i].addEventListener('scroll', function() {
          var factor = this.scrollTop / (this.scrollHeight - this.offsetHeight);
          for (var j = 0; j < columns.length; j++) {
              columns[j].scrollTop = factor * (columns[j].scrollHeight - columns[j].offsetHeight);
          }
      });
  }

http://codepen.io/NourSammour/pen/ONLoxZ?editors=1011

Or you can simply use JQuery

$(document).ready(function() {
    $('.column').each(function() {
        var obj = $(this);
        obj.scroll(function() {
            $('.column').scrollTop(obj.scrollTop());
        });
    });
});

http://codepen.io/NourSammour/pen/wGwEmY?editors=1111