How can I make magicline animation with horizontal scrollable navigation?

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>