javascript - 如何制作带有水平滚动导航的 magicline 动画？

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>