Question

我有一个菜单已经发展到有时足够长的时间，我希望它能够滚动（就像在风景中的移动电话上）。这个我没有问题。

在该菜单中是一个应该伸出一边的子菜单。我也可以做到这一点。

我无法做到这两件事 - 当我将菜单设置为可滚动时，子菜单会被剪切（至少在Chrome中）。

如果主菜单可滚动，有什么好的选项（我能想到一些没有吸引力的选项）让子菜单不被剪裁？

这是一个例子，说明了我在说什么。

function makeScrollable(){
	var outer = document.getElementById("outer");
  outer.style.overflowY="auto";
}

ul{
  list-style:none;
  border: 1px solid black;
  background-color: grey;
  padding: 10px;
}

#outer{
  position: absolute;
  right: 10px;
  max-height: 80px;
}
#inner{
  position:absolute;
  right: 90%;
}
li{
  display:block;
}

<ul id="outer">
<li>one</li>
<li>two</li>
<li>
  <ul id="inner">
  <li>alpha</li>
  <li>beta</li>
  <li>gamma</li>
  </ul>
</li>
<li>three</li>
<li>four</li>
<li>five</li>
<li>six</li>
</ul>
<button onclick="makeScrollable()">Make outer scrollable
</button>

Answer 1

简单地说，你不能兼得。至少不是在同一个元素上。

流行图书馆的方式（即Bootstrap，Material Design）是通过以下方式将父母的子菜单放在之外，通过：

根据父元素.getBoundingClientRect()值
将子菜单附加到<body>元素，
并在子菜单打开时禁用<body>上的滚动，以防止从固定定位的子菜单下移动父项。

作为旁注，我碰巧相信你真正的问题是你是否正在尝试将桌面范例应用于触控设备，这些设备实际上并不起作用。

在触摸设备上，菜单必须足够大，以便在不担心没有击中预定目标的情况下进行攻击。通常，菜单项应至少为45px高。

此外，在触摸设备上，在整个屏幕宽度上打开菜单不是问题。恰恰相反：没有人关心在较窄的菜单下看到1/3的页面。

子菜单可以在主菜单中以手风琴打开，背景略有不同，向下推动后续父元素或在主要元素上作为新的菜单层，最终使用3d进入/退出动画，在这种情况下返回应该通过关闭子菜单，点击一个宽大的关闭按钮或者从菜单打开的方向滑动来完成顶级操作。

注意我在这里只是简单介绍了良好的移动设计原则和实践。确保你（重新）更多地搜索它，这是一个非常广泛的主题。一个很好的起点是来自Google的Material Design Guidelines。

如何允许元素溢出可滚动元素

1 个答案: