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

Posted 2023-05-07

【中文标题】单击时滚动到不滚动到正确的列表项

【英文标题】：ScrollTo on click not scrolling to the correct list item

【发布时间】：2021-09-25 09:17:36

【问题描述】：

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

【问题讨论】：

您应该考虑您当前的滚动位置。如果您在单击任何数字之前滚动到顶部，您会看到您滚动到了正确的位置。

@DionisTakac 我应该如何更新代码以使其滚动到正确的位置，而不必总是滚动回列表顶部？

【参考方案1】：

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

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

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

检查codepen here。

【讨论】：

乐于助人，一切顺利@probablybest

【参考方案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);
);

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

【讨论】：

感谢您的评论，但这会产生错误：“无法读取未定义的属性 'top'”

我用过你留下的 Codepen，我改了，它对我很好。

我没有更改与调用***属性相关的任何内容。

@probablybest 你检查了我的解决方案吗？