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

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

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

比我想要的更长的方法，但它有效。

如何在加载div的情况下滚动表格而不滚动页面

1 个答案: