时间戳

首页 > 解决方案 > 结合 overflow-y: scroll 和 overflow-x: visible

html - 结合 overflow-y: scroll 和 overflow-x: visible

问题描述

我有一个 div，它的弹出 div 绝对位于右侧。它一切正常，但我需要为我的主 div 添加一个最大高度。因为它会溢出，所以我添加了溢出-y 滚动，但它把一切都搞砸了。它可以防止我的弹出 div 超出主 div，并使用水平滚动条将它们放置在内部。

我模拟了一个例子：

.menu {
  height: 200px;
  max-height: 200px;
  width: 200px;
  background-color: red;
  margin-bottom: 50px;
}

.menu.overflow {
  overflow-y: scroll;
  background-color: purple;
  height: 150px;
  max-height: 150px;
}

.menu-item {
  height: 30px;
  width: 100%;
  background-color: blue;
  position: relative;
  margin-bottom: 10px;
  cursor: pointer;
}

.menu-item-flyout {
  display: none;
  width: 200px;
  height: 100px;
  position: absolute;
  left: 100%;
  background-color: green;
  top: 0;
}

.menu-item:hover .menu-item-flyout {
  display: block;
}
<!-- no overflow y scroll -->

working correctly:
<div class="menu">
  <div class="menu-item">
    <div class="menu-item-flyout"></div>
  </div>
  
  <div class="menu-item">
    <div class="menu-item-flyout"></div>
  </div>
  
  <div class="menu-item">
    <div class="menu-item-flyout"></div>
  </div>
</div>

<!-- overflow y scroll -->

This is not working. I want to add overflow y
scroll to menu but it prevents the flyout

<div class="menu overflow">
  <div class="menu-item">
    <div class="menu-item-flyout"></div>
  </div>
  
  <div class="menu-item">
    <div class="menu-item-flyout"></div>
  </div>
  
  <div class="menu-item">
    <div class="menu-item-flyout"></div>
  </div>
</div>

标签： htmlcss

解决方案

不幸的是，您不能混合溢出值。每个 MDN 上overflow-x：

如果overflow-y是hidden，scroll或者auto并且这个属性是visible （默认），它将隐式计算为auto。

auto，在这种情况下，强制滚动条。没有办法解决这个问题：你不能让一个盒子只在一个方向上溢出。

作为一般原则，基于悬停的菜单很难按原样导航，但从可访问性的角度来看是危险的。在混合中添加滚动条是灾难的根源。我建议从另一个角度解决问题。

推荐阅读