如何在加载时滚动div内的表格而不滚动页面

Question

我有一个顶部有下拉菜单和图像的页面，然后是底部的价格网格（折叠下方）。价格网格在 div 元素内是可滚动的。加载时选择的网格上有一个价格，但它是隐藏的，因此您必须向下滚动表格才能看到它。

我的问题是，我想滚动 div 元素内的表格以显示活动状态 - 但我也不想滚动页面。在加载时，用户不应该看到任何移动，表格应该滚动以在他们不知道的情况下显示（首屏下方）。当他们向下滚动页面时，他们应该会看到表格正在显示有效（选定的价格）并且表格将被滚动。

const activeRow = $('#prices_table').find('tr td.active');

activeRow[0].scrollIntoView({block: 'center', behavior: 'smooth' });

我的代码的问题是它将用户向下滚动到价格网格，然后滚动价格网格。我希望用户自己向下滚动到价格网格。

我发现了很多类似的问题，所有这些都导致整个页面滚动到 div，然后 div 滚动显示活动类。我需要一个页面不滚动的解决方案。

Answer 1

我还没有在 JQuery 中提出解决方案。

var hasScrolled = false;

function isInViewport() {
    if (!hasScrolled) {
        var elem = $('#prices_table');
        if (elem !== undefined) {
            var elementTop = elem.offset().top;
            var elemBottom = elementTop + elem.outerHeight();
            var viewportTop = $(window).scrollTop();
            var viewportBottom = viewportTop + $(window).height();

            // return elemBottom > viewportTop && elemTop < viewportBottom;
            if (elemBottom > viewportTop && elementTop < viewportBottom) {
                var activeRow = $('#prices_table').find('tr td.active');
                var containerToScroll = $('#prices_table').find('tbody');
                var tdHeight = activeRow.outerHeight();
                if (activeRow) {
                    if (activeRow[0] !== undefined{
                 $(containerToScroll).scrollTop(($('#prices_table').find('tr td.active').offset().top - $('#prices_table').find('tbody').offset().top) - (tdHeight * 2));
                          hasScrolled = true;
                      }
                 }
            }
        }
    }
}


$(window).scroll(function() {
    isInViewport('#prices_table');
});

在实际滚动之前，我有一些变量需要检查，因为有时元素在加载时位于正确的位置，一旦它滚动了一次，我不想让它移动。

• 在滚动时，我现在检查元素是否在视图中。
• 然后我检查元素之前是否滚动过，如果没有，我会继续。
• 我设置元素，如果它不存在则不继续。
• 我做了一些计算来检查滚动需要移动的差异，如果没有差异我不继续。
• 然后我进行计算并将变量 hasScrolled 更新为 true，这样就不会再次触发。

比我寻找的方法要长一点，但它很管用。