Javascript 如何使用水平滚动导航制作magicline动画？

这是我写过的代码。如果没有滚动，它将正常工作。但是，当您单击滚动区域中的其余元素时，这些元素无法正常工作。单击Link4之后的元素以了解问题

$（函数（）{
$（“.li”）。单击（函数（）{
$（“.magicline”）.css({
宽度：
$（本）
.outerWidth（）+“px”，
左：
$（本）
.position（）.left+“px”
});
});
$（“.li”）.first（）.trigger（“单击”）；
});
正文{
填充：0；
保证金：0；
}
ul，
李{
列表样式：无；
填充：0；
保证金：0；
}
.导航{
宽度：300px；
显示器：flex；
边框顶部：1个实心番茄；
边框底部：1个实心番茄；
边缘顶部：100px；
溢出：自动；
位置：相对位置；
}
李先生{
空白：nowrap；
位置：相对位置；
z指数：2；
光标：指针；
}
.项目{
显示：块；
文字装饰：无；
颜色：#444；
利润率：10px；
填充：10px；
}
马吉克林先生{
位置：绝对位置；
/*宽度js，左js*/
位置：绝对位置；
高度：50px；
边界半径：25px；
背景颜色：粉红色；
过渡：0.3s；
最高：50%；
转化：translateY（-50%）；
}











您需要添加父对象的
scrollLeft
属性：


$（函数（）{
$（“.li”）。单击（函数（）{
var lft=$（this.parent（）.scrollLeft（）+$（this.position（）.left；//您需要添加父对象的
scrollLeft
属性：


$（函数（）{
$（“.li”）。单击（函数（）{
var lft=$（this.parent（）.scrollLeft（）+$（this.position（）.left）//