溢出滚动可见的下拉内容答案

【问题标题】：Dropdown content visible with overflow scroll溢出滚动可见的下拉内容
【发布时间】：2021-03-02 18:19:58
【问题描述】：

我为我当前的问题创建了看起来很糟糕的演示。问题是，我怎样才能让overflow-y 滚动，并且overflow-x 可见，而可扩展内容在其所有大小下仍然可见（没有被div 的末尾剪切）？

在此示例中，可展开内容以其完整大小显示而没有溢出，但在溢出时，它只是被边框切割。尝试了使用包装器的解决方法，但实际上它根本不起作用:(

body {
background-color: cyan;
}

.leftnav {
width: 8em;
height: 5em;
padding-right: 7em;
background-color: green;
color: white;
overflow-y: scroll;
overflow-x: visible;
direction: rtl;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  color: black;
  display: none;
  position: absolute;
  left: 5em;
  top: -1em;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  padding: 8px;
  z-index: 2;
}

.dropdown:hover .dropdown-content {
  display: block;
}

<body>
<p></p>


<div class="leftnav">

<div class="dropdown">
  <span>Mouse over me</span>
  <div class="dropdown-content">
  <p>Hello World!</p>
  </div>
</div>
<br>
<div class="dropdown">
  <span>Mouse over me</span>
  <div class="dropdown-content">
  <p>Hello World!</p>
  </div>
</div>
<br>
<div class="dropdown">
  <span>Mouse over me</span>
  <div class="dropdown-content">
  <p>Hello World!</p>
  </div>
</div>
<br>
<div class="dropdown">
  <span>Mouse over me</span>
  <div class="dropdown-content">
  <p>Hello World!</p>
  </div>
</div>
<br>
<div class="dropdown">
  <span>Mouse over me</span>
  <div class="dropdown-content">
  <p>Hello World!</p>
  </div>
</div>
<br>
<div class="dropdown">
  <span>Mouse over me</span>
  <div class="dropdown-content">
  <p>Hello World!</p>
  </div>



</body>

【问题讨论】：

你能把它作为一个代码sn-p吗？
对不起，我已经编辑了；）
您希望看到“
Hello World!
”不包含在父级中，对吗？
是的，你是对的 :)

标签： html css dropdown

【解决方案1】：

好的，通过玩玩和谷歌搜索，如果没有 JavaScript，这是不可能的。你可以把它拿到外面，但是，如果你滚动，元素会失去它的实际位置。这是一个很有趣的问题，更多内容你可以找到here and problems solution。

$(function() {
  // whenever we hover over a menu item that has a submenu
  $('.dropdown').on('mouseover', function() {
    var $menuItem = $(this),
        $submenuWrapper = $('> .dropdown-content', $menuItem);
    
    // grab the menu item's position relative to its positioned parent
    var menuItemPos = $menuItem.position();
    
    // place the submenu in the correct position relevant to the menu item
    $submenuWrapper.css({
      top: menuItemPos.top,
      left: menuItemPos.left + Math.round($menuItem.outerWidth() * 0.75)
    });
  });
});

body {
background-color: cyan;
position: relative;
}

.wrapper {position: relative;}

.leftnav {
width: 8em;
height: 5em;
padding-right: 7em;
background-color: green;
color: white;
overflow-y: scroll;
overflow-x: visible;
direction: rtl;
}

.dropdown {
  display: inline-block;
}

.dropdown-content {
  color: black;
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  padding: 8px;
  z-index: 2;
}

.dropdown:hover .dropdown-content {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<p></p>

<div class="wrapper">


<div class="leftnav">

<div class="dropdown">
  <span>Mouse over me</span>
  <div class="dropdown-content">
  <p>Hello World!</p>
  </div>
</div>
<br>
<div class="dropdown">
  <span>Mouse over me</span>
  <div class="dropdown-content">
  <p>Hello World!</p>
  </div>
</div>
<br>
<div class="dropdown">
  <span>Mouse over me</span>
  <div class="dropdown-content">
  <p>Hello World!</p>
  </div>
</div>
<br>
<div class="dropdown">
  <span>Mouse over me</span>
  <div class="dropdown-content">
  <p>Hello World!</p>
  </div>
</div>
<br>
<div class="dropdown">
  <span>Mouse over me</span>
  <div class="dropdown-content">
  <p>Hello World!</p>
  </div>
</div>
<br>
<div class="dropdown">
  <span>Mouse over me</span>
  <div class="dropdown-content">
  <p>Hello World!</p>
  </div>
</div>

</div>

</div>

</body>

【讨论】：