title: jQuery somehow causing page to scroll past page bottom
body: <p>I can't figure out what is going on with a site I am working on, after I made a layout change. </p>
  
  <p>It has 2 columns - one on left for navigation, and a main body area. Both are scrollable. The main content area is somehow scrolling indefinitely past page bottom and I am trying to fix the problem via CSS.</p>
  
  <p>The structure is</p>
  
  <pre><code>&lt;div class="overall-wrapper"&gt;
     &lt;div class = "wrapper for header, tabs, panels, main content"&gt;
        &lt;div class="header"&gt;&lt;/div&gt;
        &lt;div class="tabs"&gt;&lt;/div&gt;
        &lt;div class="sidebar"&gt;&lt;/div&gt; &lt;!-- causing all the trouble it seems! --&gt;
        &lt;div class="main-wrapper"&gt;
           &lt;div class = "main"&gt;&lt;/div&gt;
        &lt;/div&gt;
     &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Somehow the 2 columns are coupled in such a way where the main content keeps scrolling past page bottom anytime the navigation panel is not scrolled to its bottom.</p>
  
  <p>This screen video shows the issue:</p>
  
  <p><a href="https://drive.google.com/open?id=1SLUAKGPLchTCpEhXe55v8o4dMW_w8dvT" rel="nofollow noreferrer">https://drive.google.com/open?id=1SLUAKGPLchTCpEhXe55v8o4dMW_w8dvT</a></p>
  
  <p>Here is where you can see various behaviors:</p>
  
  <p>First 10 seconds - here you see the odd behavior in main content scrolling when Syllabus tab is selected, and the tab panel’s scroll bar is not at bottom</p>
  
  <p>0:13-0:20 - here I scroll the tab panel’s content to bottom, and now main content scroll behavior is normal</p>
  
  <p>0:21-0:28 - Here I choose a different tab panel, and the main content scrolls normally</p>
  
  <p>0:42 - 0:50 - Here I collapse the navigation panel and the main content still scrolls past bottom of page indefinitely</p>
  
  <p>Based on this I can conclude that the presence of a scroll bar in the left panel causes the main content to indefinitely scroll past page bottom whenever the left scroll bar is NOT at the bottom. When the left scroll bar is at bottom, then the main content scrolls normally. Also, anytime a tab from left is chosen that does not have a scroll bar in its panel, then the main content scrolls normally.</p>
  
  <p>If you scroll the navigation sidebar when main content is towards bottom ,notice how right scroll bar moves a bit. Odd!</p>
  
  <p>It seems that maybe various parts of the app that deal with scroll event are oddly interacting causing this indefinite scrolling in main body. Just not sure how to solve this weird problem.</p>
  
  <p>Here is link to the site under development:
  <a href="https://29b310b4.ngrok.io/lessons/an-introduction-to-triads-and-their-inversions" rel="nofollow noreferrer">https://29b310b4.ngrok.io/lessons/an-introduction-to-triads-and-their-inversions</a></p>
  
  <h2>Edit</h2>
  
  <p>So I found some jQuery code in the app that seems to be causing the problem (thanks to Chrome Tools event listener break function):</p>
  
  <pre><code>function initTooltips() {
  
          // Clear out old tooltips
  
  
          if( $('#learndash-tooltips').length ) {
              $('#learndash-tooltips').remove();
              $tooltips = $('*[data-ld-tooltip]');
          }
  
          if ($tooltips.length) {
              $('body').prepend('&lt;div id="learndash-tooltips"&gt;&lt;/div&gt;');
              var $ctr =1;
              $tooltips.each(function() {
                  var anchor = $(this);
                  if (anchor.hasClass('ld-item-list-item')) {
                      anchor = anchor.find('.ld-item-title');
                  }
                  var elementOffsets = {
                      top: anchor.offset().top,
                      left: anchor.offset().left + (anchor.outerWidth() / 2)
                  };
                  var $content = $(this).attr('data-ld-tooltip');
                  var $rel_id = Math.floor((Math.random() * 99999));
                  var $tooltip = '&lt;span id="ld-tooltip-' + $rel_id + '" class="ld-tooltip" style="top:' + elementOffsets.top + 'px; left:' + elementOffsets.left + 'px;"&gt;' + $content + '&lt;/span&gt;';
                  $(this).attr('data-ld-tooltip-id', $rel_id);
                  $('#learndash-tooltips').append($tooltip);
                  $ctr++;
                  var $tooltip = $('#ld-tooltip-' + $rel_id);
                  $(this).hover(
                      function() {
                          $tooltip.addClass('ld-visible');
                      },
                      function() {
                          $tooltip.removeClass('ld-visible');
                      }
                  );
              });
  
              $(window).on('resize', function() {
                  // Reposition tooltips after resizing
                  positionTooltips();
              });
  
              $(window).add('.ld-focus-sidebar-wrapper').on('scroll', function() {
                  // Hide tooltips so they don't persist while scrolling
                  $('.ld-visible.ld-tooltip').removeClass('ld-visible');
                  // Reposition tooltips after scrolling
                  positionTooltips();
              });
  
              positionTooltips();
          }
      }
  
  function positionTooltips() {
          console.log('positiontooltips');
          if ( typeof $tooltips !== 'undefined' ) {
              setTimeout(function() {
  
                  $tooltips.each(function() {
                      var anchor = $(this);
                      var $rel_id = anchor.attr('data-ld-tooltip-id');
                      $tooltip = $('#ld-tooltip-' + $rel_id);
  
                      if (anchor.hasClass('ld-item-list-item')) {
                          anchor = anchor.find('.ld-item-title');
                      }
                      $tooltip.css({
                          'top' : anchor.offset().top,
                          'left' : anchor.offset().left + (anchor.outerWidth() / 2),
                          'margin-left' : 0,
                          'margin-right' : 0
                      }).removeClass('ld-shifted-left ld-shifted-right');
                      if ($tooltip.offset().left &lt;= 0) {
                          $tooltip.css({ 'margin-left' : Math.abs($tooltip.offset().left) }).addClass('ld-shifted-left');
                      }
                      var $tooltipRight = $(window).width() - ($tooltip.offset().left + $tooltip.outerWidth());
                      if ($tooltipRight &lt;= 0) {
                          $tooltip.css({ 'margin-right' : Math.abs($tooltipRight) }).addClass('ld-shifted-right');
                      }
  
                  });
              }, 500);
          }
      }
  </code></pre>
  
  <p>What's odd is that this code didn't cause a problem previously. I then made some layout changes, ands the new layout seems to be such that this part</p>
  
  <pre><code>positionTooltips();
  </code></pre>
  
  <p>called in</p>
  
  <pre><code>$(window).add('.ld-focus-sidebar-wrapper').on('scroll', function() {
  </code></pre>
  
  <p>is causing a continuous loop. I commented out <code>positionTooltips();</code> to get rid of the weird scrolling behavior (as opposed to a CSS fix that I was hoping for), but my question is:</p>
  
  <p>"Why does the function call positionTooltips(); cause infinite scrolling?"</p>