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

【问题标题】：How to set li element positioning that has a parent with absolute position inside a container using horizontal scrolling如何使用水平滚动设置在容器内具有绝对位置的父元素的 li 元素定位
【发布时间】：2019-01-12 13:53:30
【问题描述】：

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

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

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

Here is my code so far:

// $('.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

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

【问题讨论】：

相当分享链接，请在此处粘贴代码，因为这对其他人有帮助
感谢您在 stackoverflow 上分享问题。请阅读How do I ask a good question 上的这篇文章，尤其是Help others reproduce the problem 部分，了解有关为什么您不应该只发布指向您的实时示例的链接的更多信息。祝你好运！
@AkashDubey 帖子显示了代码 sn-p，即使包含链接也是如此。这可能是 SO 的默认行为。
@StephanT。感谢您编辑我的答案，我没有意识到您在其中包含了代码 sn-p。

标签： javascript jquery html css

【解决方案1】：

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

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

这解决了我的问题并得到了预期的解决方案。

【讨论】：