我有一个页面,其下拉列表和图像位于顶部,然后是底部的价格网格(低于折叠)。价格网格可以在div元素内滚动。在加载时,所选网格上有一个价格,但它是隐藏的,因此您必须向下滚动表格才能看到它。
我的问题是,我想在div元素中滚动表格以显示活动 - 但我也不想滚动页面。在加载时,用户不应该看到任何移动,表格应该滚动显示没有他们知道(在折叠下方)。当他们向下滚动页面时,他们应该看到表格显示活动(选定价格),表格将滚动。
const activeRow = $('#prices_table').find('tr td.active');
activeRow[0].scrollIntoView({block: 'center', behavior: 'smooth' });
我的代码存在的问题是它将用户向下滚动到价格网格,然后滚动价格网格。我希望让用户自己向下滚动到价格网格。
我发现了许多类似的问题,所有这些都导致整个页面滚动到div,然后div滚动显示活动类。我需要一个页面不滚动的解决方案。
答案 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');
});
我在实际滚动之前要检查一些变量,因为有时元素在加载时位于正确的位置,并且一旦滚动一次我不希望它移动。
比我想要的更长的方法,但它有效。