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

Question

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

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

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

Codepen here.

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

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

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

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

检查codepen here。

Answer 2

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

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

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