如何使用水平滚动设置在容器内部具有绝对位置的父元素的li元素定位

Question

尝试实现自定义导航菜单（对于移动响应式设计），我决定在nav菜单容器上使用水平滚动功能来显示主要项目（水平）。 这些项目具有垂直显示的子项目（如列表中）。

添加水平滚动之后，从其原始位置向右滚动会导致子项（当将鼠标悬停在其父项上时显示）向右移动，从而使其与父项不对齐。

我尝试添加基于滚动百分比计算距离的js代码，并调整子项以更好地与其父项对齐，但结果却有所不同。

到目前为止，这是我的代码 ：

 // $('.menu-container').scroll(function(){ // var scrollPercentage = 100*this.scrollLeft/this.scrollWidth/(1-this.clientWidth/this.scrollWidth); // console.log(scrollPercentage.toFixed(2)); // $(".menu > ul > .page_item_has_children > .children").css("margin-left", 100 / (-1.55 * scrollPercentage.toFixed(2))); // }); 

 @import url('https://fonts.googleapis.com/css?family=Crimson+Text|Libre+Franklin'); body { font-family: 'Crimson Text', serif; /* font-family: 'Libre Franklin', sans-serif; */ } /***** Start: Forms *****/ .searchform { display: inline-flex; margin: 0 auto; } /***** End: Forms *****/ /***** Start: Navigation *****/ /*** Start: Menus ***/ .menu-container { display: flex; white-space: nowrap; overflow-x: scroll; align-items: center; } .menu-container::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); border-radius: 0.5rem; background-color: #F5F5F5; } .menu-container::-webkit-scrollbar { width: 0.25rem; height: 0.25rem; background-color: #F5F5F5; } .menu-container::-webkit-scrollbar-thumb { border-radius: 0.5rem; -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3); background-color: #555; } .menu { display: inline-flex; margin: 0 auto; } .menu>ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; } .menu>ul>li { display: inline-flex; padding: 0 0.5rem; height: 2.75rem; /* max-width: 15rem; */ /* width: 8rem; */ /* Adjust this value depending on the longest length of the navigation menu's main link items */ } .menu a { text-decoration: none; display: flex; align-items: center; } .menu>ul>.page_item_has_children>.children { padding: 2rem 0 0 0; } .menu li li { margin-left: -0.5rem; } .menu li { /* background: #000; */ } .children { margin: 1rem 0; padding: 0rem; position: absolute; } .children a { width: 100%; padding: 0 0.5rem; } .children .page_item_has_children .children { display: inline-block; margin: 0rem; left: 15rem; /* Adjust this value depending on the longest length of the navigation menu's sub-items */ } .children>li { visibility: hidden; opacity: 0; display: none; height: 4rem; /* Adjust this value depending on the height of the navigation menu's sub-items */ } .children .page_item_has_children .children>li { /*left: 1rem;*/ /*position: relative;*/ } li:hover>.children>li { display: flex; visibility: visible; opacity: 1; max-width: 25rem; width: 15rem; } /*** End: Menus ***/ /***** End: Navigation *****/ /***** Start: Media *****/ @media screen and (max-width: 1200px) { /*** Start: Searchform *****/ /*** End: Searchform ***/ /*** Start: Menus ***/ /*** End: Menus ***/ } /***** End: Media *****/ 

 <div class="menu-container"> <div class="menu"> <ul> <li class=""><a href="https://MidniteDev-Development.000webhostapp.com/">Home</a></li> <li class=""><a href="https://MidniteDev-Development.000webhostapp.com/front-page">Front Page</a></li> <li class=""><a href="https://MidniteDev-Development.000webhostapp.com/blog">Blog</a></li> <li class="page_item_has_children"> <a href="https://MidniteDev-Development.000webhostapp.com/about">About The Tests</a> <ul class="children"> <li class=""><a href="https://MidniteDev-Development.000webhostapp.com/about/page-image-alignment">Page Image Alignment</a></li> <li class="page_item_has_children"> <a href="https://MidniteDev-Development.000webhostapp.com/about/page-markup-and-formatting">Page Markup And Formatting</a> <ul class="children"> <li class=""><a href="https://MidniteDev-Development.000webhostapp.com/about/page-markup-and-formatting/formatting-content-with-images">Formatting Content with Images</a></li> </ul> </li> <li class="page_item_has_children"> <a href="https://MidniteDev-Development.000webhostapp.com/about/clearing-floats">Clearing Floats</a> <ul class="children"> <li class=""><a href="https://MidniteDev-Development.000webhostapp.com/about/clearing-floats/clearing-floats-part-1">Clearing Floats Part 1</a></li> <li class=""><a href="https://MidniteDev-Development.000webhostapp.com/about/clearing-floats/clearing-floats-part-2">Clearing Floats Part 2</a></li> </ul> </li> <li class="page_item_has_children"> <a href="https://MidniteDev-Development.000webhostapp.com/about/page-with-comments">Page with comments</a> <ul class="children"> <li class=""><a href="https://MidniteDev-Development.000webhostapp.com/about/page-with-comments/this-page-is-served-with-at-least-10-comments">This Page Is Served With at Least 10 Comments using Disqus</a></li> </ul> </li> <li class=""><a href="https://MidniteDev-Development.000webhostapp.com/about/page-with-comments-disabled">Page with comments disabled</a></li> </ul> </li> <li class="page_item_has_children"> <a href="https://MidniteDev-Development.000webhostapp.com/level-1">Level 1</a> <ul class="children"> <li class="page_item_has_children"> <a href="https://MidniteDev-Development.000webhostapp.com/level-1/level-2">Level 2</a> <ul class="children"> <li class="page_item_has_children"> <a href="https://MidniteDev-Development.000webhostapp.com/level-1/level-2/level-3">Level 3</a> <ul class="children"> <li class=""><a href="https://MidniteDev-Development.000webhostapp.com/level-1/level-2/level-3/level-4">Level 4</a></li> </ul> </li> <li class=""><a href="https://MidniteDev-Development.000webhostapp.com/level-1/level-2/level-3a">Level 3a</a></li> <li class=""><a href="https://MidniteDev-Development.000webhostapp.com/level-1/level-2/level-3b">Level 3b</a></li> </ul> </li> <li class=""><a href="https://MidniteDev-Development.000webhostapp.com/level-1/level-2a">Level 2a</a></li> <li class=""><a href="https://MidniteDev-Development.000webhostapp.com/level-1/level-2b">Level 2b</a></li> </ul> </li> <li class=""><a href="https://MidniteDev-Development.000webhostapp.com/lorem-ipsum">Lorem Ipsum</a></li> <li class=""><a href="https://MidniteDev-Development.000webhostapp.com/page-a">Page ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuv</a></li> <li class=""><a href="https://MidniteDev-Development.000webhostapp.com/page-b">Page B</a></li> </ul> </div> <form role="search" method="get" id="searchform" class="searchform" action="<?php echo esc_url( home_url( '/' ) ); ?>"> <div class="box"> <div class="container-1"> <input type="text" value="" name="s" id="s" placeholder="Search..." /> <button type="submit" id="searchsubmit" /><i class="fas fa-search"></i> </button> </div> </div> </form> </div> 

无论滚动到多远，这都是滚动期间的预期结果：

> Parent item > Parent item > Parent item
              > child item
              > child item
              > child item 

这就是我得到的：

> Parent item > Parent item > Parent item
                 > child item
                 > child item
                 > child item

为了更好地理解我的意思，请在查看菜单时尝试将浏览器的大小调整为1200px以下。

Answer 1

在我的项目中添加了这段jQuery代码，该代码根据其位移计算滚动值：

$('.menu-container').scroll(function() {
      var menuContainerScrollVal = $(".menu-container").scrollLeft();
     $(".menu > ul > .page_item_has_children >.children").css("margin-left", -menuContainerScrollVal); 
    });

这解决了我的问题，并为我提供了预期的解决方案。