如何使用水平可滚动导航制作魔术线动画?

Question

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

$(function() {
$(".li").click(function() {
$(".magicline").css({
width:
$(this)
.outerWidth() + "px",
left:
$(this)
.position().left + "px"
});
});

$(".li").first().trigger("click");
});

body {
padding: 0;
margin: 0;
}
ul,
li {
list-style: none;
padding: 0;
margin: 0;
}
.nav {
width: 300px;
display: flex;
border-top: 1px solid tomato;
border-bottom: 1px solid tomato;
margin-top: 100px;
overflow: auto;
position: relative;
}
.li {
white-space: nowrap;
position: relative;
z-index: 2;
cursor: pointer;
}
.item {
display: block;
text-decoration: none;
color: #444;
margin: 10px;
padding: 10px;
}
.magicline {
position: absolute;
/* width js, left js */
position: absolute;
height: 50px;
border-radius: 25px;
background-color: pink;
transition: 0.3s;
top: 50%;
transform: translateY(-50%);
}

<ul class="nav">
<div class="magicline"></div>
<li class="li"><a href="#0" class="item">Link 1</a></li>
<li class="li"><a href="#0" class="item">Link 2</a></li>
<li class="li"><a href="#0" class="item">Link 3</a></li>
<li class="li"><a href="#0" class="item">Link 4</a></li>
<li class="li"><a href="#0" class="item">Link 5</a></li>
<li class="li"><a href="#0" class="item">Link 6</a></li>
<li class="li"><a href="#0" class="item">Link 7</a></li>
<li class="li"><a href="#0" class="item">Link 8</a></li>
<li class="li"><a href="#0" class="item">Link 9</a></li>
</ul>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

Answer 1

您需要添加父级的scrollLeft属性：

$(function() {
$(".li").click(function() {
var lft = $(this).parent().scrollLeft() + $(this).position().left; // <---
$(".magicline").css({
width:
$(this)
.outerWidth() + "px",
left:
lft + "px"
});
});

$(".li").first().trigger("click");
});

body {
padding: 0;
margin: 0;
}
ul,
li {
list-style: none;
padding: 0;
margin: 0;
}
.nav {
width: 300px;
display: flex;
border-top: 1px solid tomato;
border-bottom: 1px solid tomato;
margin-top: 100px;
overflow: auto;
position: relative;
}
.li {
white-space: nowrap;
position: relative;
z-index: 2;
cursor: pointer;
}
.item {
display: block;
text-decoration: none;
color: #444;
margin: 10px;
padding: 10px;
}
.magicline {
position: absolute;
/* width js, left js */
position: absolute;
height: 50px;
border-radius: 25px;
background-color: pink;
transition: 0.3s;
top: 50%;
transform: translateY(-50%);
}

<ul class="nav">
<div class="magicline"></div>
<li class="li"><a href="#0" class="item">Link 1</a></li>
<li class="li"><a href="#0" class="item">Link 2</a></li>
<li class="li"><a href="#0" class="item">Link 3</a></li>
<li class="li"><a href="#0" class="item">Link 4</a></li>
<li class="li"><a href="#0" class="item">Link 5</a></li>
<li class="li"><a href="#0" class="item">Link 6</a></li>
<li class="li"><a href="#0" class="item">Link 7</a></li>
<li class="li"><a href="#0" class="item">Link 8</a></li>
<li class="li"><a href="#0" class="item">Link 9</a></li>
</ul>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>