title: JQuery Double Scroll - Margin / Alignment Issue
body: <p>Well I am using the JQuery jqDoubleScroll plugin to display a scroll bar on top and on the bottom of the div ( which contains a table )</p>
  
  <p>everything looks great in full view, but when the scrollbar appears it </p>
  
  <p>1) hangs off the left side a bit</p>
  
  <p>2) the left and right margins are inconsistent (not equal)</p>
  
  <p>I believe these items are related. I also have a permanent  overflow-y: scroll off the body.</p>
  
  <p>Here is a pen
  <a href="https://codepen.io/rblanc/pen/jpQbBv" rel="nofollow noreferrer">https://codepen.io/rblanc/pen/jpQbBv</a></p>
  
  <p>HTML</p>
  
  <pre><code>&lt;h1&gt;Recompute on window resize&lt;/h1&gt;
  
  &lt;p&gt;Adds the scrollbar only if the bottom one is present, and recompute the top scrollbar size each time the window is resized.&lt;/p&gt;
  &lt;p&gt;Resize the window to try!!!!&lt;/p&gt;
  
  &lt;div id="sample2"&gt;
    &lt;table&gt;
    &lt;tr&gt;
    &lt;th&gt;AAAAAAAAA&lt;/th&gt;
    &lt;th&gt;BBBBBBBBB&lt;/th&gt;
    &lt;th&gt;CCCCCCCCC&lt;/th&gt;
    &lt;th&gt;DDDDDDDDD&lt;/th&gt;
    &lt;th&gt;EEEEEEEEE&lt;/th&gt;
    &lt;th&gt;FFFFFFFFF&lt;/th&gt;
    &lt;th&gt;GGGGGGGGG&lt;/th&gt;
    &lt;th&gt;HHHHHHHHH&lt;/th&gt;
    &lt;th&gt; IIIIIIIII&lt;/th&gt;
    &lt;th&gt;JJJJJJJJJ&lt;/th&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;AAAAAAAAA&lt;/td&gt;
    &lt;td&gt;BBBBBBBBB&lt;/td&gt;
    &lt;td&gt;CCCCCCCCC&lt;/td&gt;
    &lt;td&gt;DDDDDDDDD&lt;/td&gt;
    &lt;td&gt;EEEEEEEEE&lt;/td&gt;
    &lt;td&gt;FFFFFFFFF&lt;/td&gt;
    &lt;td&gt;GGGGGGGGG&lt;/td&gt;
    &lt;td&gt;HHHHHHHHH&lt;/td&gt;
    &lt;td&gt;IIIIIIIII&lt;/td&gt;
    &lt;td&gt;JJJJJJJJJ&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;AAAAAAAAA&lt;/td&gt;
    &lt;td&gt;BBBBBBBBB&lt;/td&gt;
    &lt;td&gt;CCCCCCCCC&lt;/td&gt;
    &lt;td&gt;DDDDDDDDD&lt;/td&gt;
    &lt;td&gt;EEEEEEEEE&lt;/td&gt;
    &lt;td&gt;FFFFFFFFF&lt;/td&gt;
    &lt;td&gt;GGGGGGGGG&lt;/td&gt;
    &lt;td&gt;HHHHHHHHH&lt;/td&gt;
    &lt;td&gt;IIIIIIIII&lt;/td&gt;
    &lt;td&gt;JJJJJJJJJ&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;AAAAAAAAA&lt;/td&gt;
    &lt;td&gt;BBBBBBBBB&lt;/td&gt;
    &lt;td&gt;CCCCCCCCC&lt;/td&gt;
    &lt;td&gt;DDDDDDDDD&lt;/td&gt;
    &lt;td&gt;EEEEEEEEE&lt;/td&gt;
    &lt;td&gt;FFFFFFFFF&lt;/td&gt;
    &lt;td&gt;GGGGGGGGG&lt;/td&gt;
    &lt;td&gt;HHHHHHHHH&lt;/td&gt;
    &lt;td&gt;IIIIIIIII&lt;/td&gt;
    &lt;td&gt;JJJJJJJJJ&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;AAAAAAAAA&lt;/td&gt;
    &lt;td&gt;BBBBBBBBB&lt;/td&gt;
    &lt;td&gt;CCCCCCCCC&lt;/td&gt;
    &lt;td&gt;DDDDDDDDD&lt;/td&gt;
    &lt;td&gt;EEEEEEEEE&lt;/td&gt;
    &lt;td&gt;FFFFFFFFF&lt;/td&gt;
    &lt;td&gt;GGGGGGGGG&lt;/td&gt;
    &lt;td&gt;HHHHHHHHH&lt;/td&gt;
    &lt;td&gt;IIIIIIIII&lt;/td&gt;
    &lt;td&gt;JJJJJJJJJ&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;AAAAAAAAA&lt;/td&gt;
    &lt;td&gt;BBBBBBBBB&lt;/td&gt;
    &lt;td&gt;CCCCCCCCC&lt;/td&gt;
    &lt;td&gt;DDDDDDDDD&lt;/td&gt;
    &lt;td&gt;EEEEEEEEE&lt;/td&gt;
    &lt;td&gt;FFFFFFFFF&lt;/td&gt;
    &lt;td&gt;GGGGGGGGG&lt;/td&gt;
    &lt;td&gt;HHHHHHHHH&lt;/td&gt;
    &lt;td&gt;IIIIIIIII&lt;/td&gt;
    &lt;td&gt;JJJJJJJJJ&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;AAAAAAAAA&lt;/td&gt;
    &lt;td&gt;BBBBBBBBB&lt;/td&gt;
    &lt;td&gt;CCCCCCCCC&lt;/td&gt;
    &lt;td&gt;DDDDDDDDD&lt;/td&gt;
    &lt;td&gt;EEEEEEEEE&lt;/td&gt;
    &lt;td&gt;FFFFFFFFF&lt;/td&gt;
    &lt;td&gt;GGGGGGGGG&lt;/td&gt;
    &lt;td&gt;HHHHHHHHH&lt;/td&gt;
    &lt;td&gt;IIIIIIIII&lt;/td&gt;
    &lt;td&gt;JJJJJJJJJ&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;AAAAAAAAA&lt;/td&gt;
    &lt;td&gt;BBBBBBBBB&lt;/td&gt;
    &lt;td&gt;CCCCCCCCC&lt;/td&gt;
    &lt;td&gt;DDDDDDDDD&lt;/td&gt;
    &lt;td&gt;EEEEEEEEE&lt;/td&gt;
    &lt;td&gt;FFFFFFFFF&lt;/td&gt;
    &lt;td&gt;GGGGGGGGG&lt;/td&gt;
    &lt;td&gt;HHHHHHHHH&lt;/td&gt;
    &lt;td&gt;IIIIIIIII&lt;/td&gt;
    &lt;td&gt;JJJJJJJJJ&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;AAAAAAAAA&lt;/td&gt;
    &lt;td&gt;BBBBBBBBB&lt;/td&gt;
    &lt;td&gt;CCCCCCCCC&lt;/td&gt;
    &lt;td&gt;DDDDDDDDD&lt;/td&gt;
    &lt;td&gt;EEEEEEEEE&lt;/td&gt;
    &lt;td&gt;FFFFFFFFF&lt;/td&gt;
    &lt;td&gt;GGGGGGGGG&lt;/td&gt;
    &lt;td&gt;HHHHHHHHH&lt;/td&gt;
    &lt;td&gt;IIIIIIIII&lt;/td&gt;
    &lt;td&gt;JJJJJJJJJ&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;AAAAAAAAA&lt;/td&gt;
    &lt;td&gt;BBBBBBBBB&lt;/td&gt;
    &lt;td&gt;CCCCCCCCC&lt;/td&gt;
    &lt;td&gt;DDDDDDDDD&lt;/td&gt;
    &lt;td&gt;EEEEEEEEE&lt;/td&gt;
    &lt;td&gt;FFFFFFFFF&lt;/td&gt;
    &lt;td&gt;GGGGGGGGG&lt;/td&gt;
    &lt;td&gt;HHHHHHHHH&lt;/td&gt;
    &lt;td&gt;IIIIIIIII&lt;/td&gt;
    &lt;td&gt;JJJJJJJJJ&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;AAAAAAAAA&lt;/td&gt;
    &lt;td&gt;BBBBBBBBB&lt;/td&gt;
    &lt;td&gt;CCCCCCCCC&lt;/td&gt;
    &lt;td&gt;DDDDDDDDD&lt;/td&gt;
    &lt;td&gt;EEEEEEEEE&lt;/td&gt;
    &lt;td&gt;FFFFFFFFF&lt;/td&gt;
    &lt;td&gt;GGGGGGGGG&lt;/td&gt;
    &lt;td&gt;HHHHHHHHH&lt;/td&gt;
    &lt;td&gt;IIIIIIIII&lt;/td&gt;
    &lt;td&gt;JJJJJJJJJ&lt;/td&gt;
  &lt;/tr&gt;
  &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>html {
      height: 100%;
      overflow-y: scroll; /**/
  }
  
  body {
      padding: 0;
      background: #ccc; 
  }
  
  #sample2 {
       width: 100%;
       margin-bottom: 40px;
   }
  
  h1 {
      font-family: Calibri;
      color: #000;
      font-size: 24px;
      font-style: normal;
      font-variant: normal;
      font-weight: 500;
      line-height: 26.4px;
     }
  
    h3 {
      font-family: Calibri;
      color: #000;
      font-size: 14px;
      font-style: normal;
      font-variant: normal;
      font-weight: 500;
      line-height: 15.4px;
    }
  
   p {
       font-family: Calibri;
       color: #000;
       font-size: 14px;
       font-style: normal;
       font-variant: normal;
       font-weight: 400;
       line-height: 20px;
     }
  
     a {
       color: #ffffff;
     }
  
     table {
     font-family: Calibri;
     color: #000;
     border-collapse: collapse; /**/
     border-spacing: 0;
     width: 98%; /**/
     height: 100%;
     margin: 0 1%; /**/
     padding: 0px;
  
      display: table; /**/
      border-spacing: 2px; /**/
      border-color: grey; /**/ 
    }
  
     tr:nth-child(odd) td {}
  
      tr:nth-child(even) td {
           background-color: rgba(255, 255, 255, 0.2);
      }
  
     table td,
       table th {
      vertical-align: middle;
      text-align: left;
      padding: 12px;
      font-size: 14px;
      font-family: Calibri;
      color: #000;
    }
  
     table tr th {
        background-color: #06A50C; !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.6);
        text-align: left;
        font-size: 14px;
        font-family: Calibri;
       font-weight: bold;
     }
  
  
  
  
  
  
   /* customize scroll */
  
   ::-webkit-scrollbar {
       width: 10px;
      height: 10px;
    }
  
   ::-webkit-scrollbar-track {
     background-color: rgba(255, 255, 255, 0.1);
  
   }
  
   ::-webkit-scrollbar-thumb {
     background-color: rgba(255, 255, 255, 0.5);
   }
  </code></pre>
  
  <p>JQUERY</p>
  
  <pre><code>  $(document).ready(function() {
    $('#sample2').doubleScroll({
       resetOnWindowResize: true
    });
    });
  
  
   (function( $ ) {
  
  jQuery.fn.doubleScroll = function(userOptions) {
  
      // Default options
      var options = {
          contentElement: undefined, // Widest element, if not specified first child element will be used
          scrollCss: {                
              'overflow-x': 'auto',
              'overflow-y': 'hidden'
          },
          contentCss: {
              'overflow-x': 'auto',
              'overflow-y': 'hidden'
          },
          onlyIfScroll: true, // top scrollbar is not shown if the bottom one is not present
          resetOnWindowResize: false, // recompute the top ScrollBar requirements when the window is resized
          timeToWaitForResize: 30 // wait for the last update event (usefull when browser fire resize event constantly during ressing)
      };
  
      $.extend(true, options, userOptions);
  
      // do not modify
      // internal stuff
      $.extend(options, {
          topScrollBarMarkup: '&lt;div class="doubleScroll-scroll-wrapper" style="height: 20px;"&gt;&lt;div class="doubleScroll-scroll" style="height: 20px;"&gt;&lt;/div&gt;&lt;/div&gt;',
          topScrollBarWrapperSelector: '.doubleScroll-scroll-wrapper',
          topScrollBarInnerSelector: '.doubleScroll-scroll'
      });
  
      var _showScrollBar = function($self, options) {
  
          if (options.onlyIfScroll &amp;&amp; $self.get(0).scrollWidth &lt;= $self.width()) {
              // content doesn't scroll
              // remove any existing occurrence...
              $self.prev(options.topScrollBarWrapperSelector).remove();
              return;
          }
  
          // add div that will act as an upper scroll only if not already added to the DOM
          var $topScrollBar = $self.prev(options.topScrollBarWrapperSelector);
  
          if ($topScrollBar.length == 0) {
  
              // creating the scrollbar
              // added before in the DOM
              $topScrollBar = $(options.topScrollBarMarkup);
              $self.before($topScrollBar);
  
              // apply the css
              $topScrollBar.css(options.scrollCss);
              $self.css(options.contentCss);
  
              // bind upper scroll to bottom scroll
              $topScrollBar.bind('scroll.doubleScroll', function() {
                  $self.scrollLeft($topScrollBar.scrollLeft());
              });
  
              // bind bottom scroll to upper scroll
              var selfScrollHandler = function() {
                  $topScrollBar.scrollLeft($self.scrollLeft());
              };
              $self.bind('scroll.doubleScroll', selfScrollHandler);
          }
  
          // find the content element (should be the widest one)  
          var $contentElement;        
  
          if (options.contentElement !== undefined &amp;&amp; $self.find(options.contentElement).length !== 0) {
              $contentElement = $self.find(options.contentElement);
          } else {
              $contentElement = $self.find('&gt;:first-child');
          }
  
          // set the width of the wrappers
          $(options.topScrollBarInnerSelector, $topScrollBar).width($contentElement.outerWidth());
          $topScrollBar.width($self.width());
          $topScrollBar.scrollLeft($self.scrollLeft());
  
      }
  
      return this.each(function() {
  
          var $self = $(this);
  
          _showScrollBar($self, options);
  
          // bind the resize handler 
          // do it once
          if (options.resetOnWindowResize) {
  
              var id;
              var handler = function(e) {
                  _showScrollBar($self, options);
              };
  
              $(window).bind('resize.doubleScroll', function() {
                  // adding/removing/replacing the scrollbar might resize the window
                  // so the resizing flag will avoid the infinite loop here...
                  clearTimeout(id);
                  id = setTimeout(handler, options.timeToWaitForResize);
              });
  
          }
  
      });
  
  }
  </code></pre>
  
  <p>}( jQuery ));</p>