时间戳

首页 > 解决方案 > 如何使用水平滚动设置在容器内具有绝对位置的父元素的 li 元素定位

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

问题描述

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

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

我尝试添加 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

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

标签： javascriptjqueryhtmlcss

解决方案

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

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

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

推荐阅读