单击 ScrollTo 不滚动到正确的列表项

Question

我有一个 SVG 地图和一个列表，如果您单击地图上的地块编号，它会在列表中突出显示。

由于有很多项目，当您单击地图上的地块编号时，它应该会滚动右侧的列表到正确的项目。

然而，当您开始点击所有不同的数字时，您会看到滚动中断并且不再滚动到正确的数字。

JS代码如下：

$('.plot__list__item').click(function () {
    $(this).toggleClass('selected');
    $(this).siblings('li').removeClass('selected');
    $('#' + $(this).data('map')).toggleClass('selected');
    $('#' + $(this).data('map')).siblings('g').removeClass('selected');
});

$('.plot__map__item').click(function () {
    $(this).toggleClass('selected');
    $(this).siblings('g').removeClass('selected');
    $('#' + $(this).data('list')).toggleClass('selected');
    $('#' + $(this).data('list')).siblings('li').removeClass('selected');
});

$('.plot__map__item').click(function () {
    let id = $(this).data('list');
    let scrollPos = $('#' + id).position().top;
    $('.plot__list').animate({
        scrollTop: scrollPos
    }, 400);
});

Answer 1

您应该考虑上次滚动的位置。试试这个代码：

var currentPosition = 0;
$('.plot__map__item').click(function () {
    let id = $(this).data('list');
    let scrollPos = $('#' + id).position().top + currentPosition;
    currentPosition = scrollPos;
    $('.plot__list').animate({
        scrollTop: scrollPos
    }, 400);
});

但是，如果您在不单击数字的情况下进行滚动，则此解决方案将不起作用。在这种情况下，您将需要重新计算滚动事件中的当前位置。

Answer 2

滚动时列表的滚动位置会不断变化。这就是为什么你会得到不规则的 scrollpos。例如，当您最初单击 1 图时，scrollpos 将为 0。但是当您稍微滚动列表时，它会变为负数，并且在您滚动列表时它会不断变化。

要解决此问题，请计算列表的顶部并将列表的位置添加到其中。将点击的动画功能更改为：

scrollTop: $('.plot__list').scrollTop() + $('#' + id).position().top

检查codepen here。

单击 ScrollTo 不滚动到正确的列表项

ScrollTo on click not scrolling to the correct list item

html

javascript

jquery

scrolltop