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

如何解决ScrollTo 点击时不滚动到正确的列表项

我有一个 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);
});

解决方法

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

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

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

检查codepen here。

,

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

[
    ['tag_id' => 3,'contact_id' => 1],['tag_id' => 2,'contact_id' => 1]
]

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