jQuery以某种方式导致页面滚动到页面底部

Question

I can't figure out what is going on with a site I am working on, after I made a layout change.

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.

The structure is

<div class="overall-wrapper">
   <div class = "wrapper for header, tabs, panels, main content">
      <div class="header"></div>
      <div class="tabs"></div>
      <div class="sidebar"></div> <!-- causing all the trouble it seems! -->
      <div class="main-wrapper">
         <div class = "main"></div>
      </div>
   </div>
</div>

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.

This screen video shows the issue:

https://drive.google.com/open?id=1SLUAKGPLchTCpEhXe55v8o4dMW_w8dvT

Here is where you can see various behaviors:

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

0:13-0:20 - here I scroll the tab panel's content to bottom, and now main content scroll behavior is normal

0:21-0:28 - Here I choose a different tab panel, and the main content scrolls normally

0:42 - 0:50 - Here I collapse the navigation panel and the main content still scrolls past bottom of page indefinitely

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.

If you scroll the navigation sidebar when main content is towards bottom ,notice how right scroll bar moves a bit. Odd!

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.

Here is link to the site under development: https://29b310b4.ngrok.io/lessons/an-introduction-to-triads-and-their-inversions

Edit

So I found some jQuery code in the app that seems to be causing the problem (thanks to Chrome Tools event listener break function):

function initTooltips() {

        // Clear out old tooltips


        if( $('#learndash-tooltips').length ) {
            $('#learndash-tooltips').remove();
            $tooltips = $('*[data-ld-tooltip]');
        }

        if ($tooltips.length) {
            $('body').prepend('<div id="learndash-tooltips"></div>');
            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 = '<span id="ld-tooltip-' + $rel_id + '" class="ld-tooltip" style="top:' + elementOffsets.top + 'px; left:' + elementOffsets.left + 'px;">' + $content + '</span>';
                $(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 <= 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 <= 0) {
                        $tooltip.css({ 'margin-right' : Math.abs($tooltipRight) }).addClass('ld-shifted-right');
                    }

                });
            }, 500);
        }
    }

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

positionTooltips();

called in

$(window).add('.ld-focus-sidebar-wrapper').on('scroll', function() {

is causing a continuous loop. I commented out positionTooltips(); to get rid of the weird scrolling behavior (as opposed to a CSS fix that I was hoping for), but my question is:

"Why does the function call positionTooltips(); cause infinite scrolling?"

Answer 1

The Solution

Ok, this was quite the trip! First I thought there was some CSS problem. Then I thought maybe presence of two scroll bars and improper event binding was causing weird behavior. Kept looking at various possible issues.

But here is what caused the problem:

$tooltip.css({
             'top' : anchor.offset().top,

This is part of the code I pasted above, and it deals with some tooltips that the app is using. Namely, it hides tooltips when scrolling.

Thinking about it, it makes sense. When top of the tooltip anchor is set to anchor.offset().top and that value is greater than the content height, then the browser sees an element with a height greater than current content height and sets that as new content height, therefore on next scroll event it thinks there is still room to scroll, and so on...

So the solution is to cap the top value of one of these tooltips as

var pageheight = $( 'div.overall-wrapper' ).height();
var currentanchorheight = anchor.offset().top;
var anchortop = currentanchorheight <  pageheight ? currentanchorheight : pageheight;

$tooltip.css({
            'top' : anchortop,

Anyway, probably obvious to experienced developers, but took me all day to figure this out! Never thought that tooltip manipulations were somehow causing this!