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

Question

This is the code I've ever write. If there is no scrolling, it works correctly. But when you click the remaining elements in the scrolling area does not work properly. Click on the elements after Link4 to understand the problem.

 $(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

You need to add the scrollLeft property of the parent:

 $(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>