如何使用水平滾動導航制作魔術線動畫？

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>