Question

更改布局后，我无法弄清正在处理的网站的状况。

它具有2列-左侧用于导航，以及一个主体区域。两者都是可滚动的。主要内容区域以某种方式无限期地滚动到页面底部之外，我正在尝试通过CSS修复问题。

结构是

<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>

以某种方式将两列结合在一起，这样，只要导航面板没有滚动到其底部，主要内容就会一直滚动到页面底部。

此屏幕视频显示了问题：

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

在这里您可以看到各种行为：

最初的10秒-在这里，当您选择了Syllabus选项卡并且选项卡面板的滚动条不在底部时，您会看到主要内容滚动的奇怪行为

0：13-0：20-在这里，我将标签面板的内容滚动到底部，现在主要内容的滚动行为是正常的

0：21-0：28-在这里我选择一个不同的选项卡面板，并且主要内容正常滚动

0:42-0:50-在这里我折叠了导航面板，并且主要内容仍然无限期地滚动到页面底部

基于此，我可以得出结论，只要左侧滚动条不在底部，则左侧面板中会出现滚动条，导致主要内容无限期地滚动到页面底部。当左滚动条位于底部时，主要内容将正常滚动。同样，只要选择从左侧开始的选项卡，该选项卡的面板中都没有滚动条，则主要内容就会正常滚动。

如果在主要内容接近底部时滚动导航侧栏，请注意右滚动栏如何移动一点。奇怪！

似乎处理滚动事件的应用程序各个部分可能发生奇怪的交互，从而导致主体中的不确定滚动。只是不确定如何解决这个奇怪的问题。

这里是到正在开发的网站的链接： https://29b310b4.ngrok.io/lessons/an-introduction-to-triads-and-their-inversions

编辑

所以我在应用程序中发现了一些jQuery代码，这似乎是导致问题的原因（感谢Chrome Tools事件监听器中断功能）：

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);
        }
    }

奇怪的是，这段代码以前没有引起问题。然后，我对布局进行了一些更改，并且新的布局看起来像是这样

positionTooltips();

呼入

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

导致连续循环。我注释掉了positionTooltips();以摆脱怪异的滚动行为（与我所希望的CSS修复相对），但是我的问题是：

“该函数为什么调用positionTooltips（）;导致无限滚动？”

Answer 1

解决方案

好的，这真是一次旅行！首先，我认为存在CSS问题。然后，我认为可能存在两个滚动条和不正确的事件绑定导致了奇怪的行为。继续研究各种可能的问题。

但这是导致问题的原因：

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

这是我上面粘贴的代码的一部分，它处理了应用程序正在使用的一些工具提示。即，它在滚动时隐藏工具提示。

考虑一下，这很有意义。当工具提示锚点的top设置为anchor.offset().top并且该值大于内容高度时，浏览器将看到一个高度大于当前内容高度的元素，并将其设置为新的内容高度，因此，在下一次滚动事件中，它认为仍有滚动空间，依此类推...

因此解决方案是将其中一个工具提示的top值限制为

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

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

无论如何，对于经验丰富的开发人员来说可能很明显，但是我却整日花了很多时间才弄清楚！从未想到工具提示操作会以某种方式导致这种情况！

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

编辑

1 个答案:

解决方案