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

时间:2018-04-13 07:24:45

标签: javascript html css

我有一个页面,其下拉列表和图像位于顶部,然后是底部的价格网格(低于折叠)。价格网格可以在div元素内滚动。在加载时,所选网格上有一个价格,但它是隐藏的,因此您必须向下滚动表格才能看到它。

我的问题是,我想在div元素中滚动表格以显示活动 - 但我也不想滚动页面。在加载时,用户不应该看到任何移动,表格应该滚动显示没有他们知道(在折叠下方)。当他们向下滚动页面时,他们应该看到表格显示活动(选定价格),表格将滚动。

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

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

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

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

1 个答案:

答案 0 :(得分:0)

我没有在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,这样就不会再次触发了。

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