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

我有一个菜单，它已经发展到一个地步，有时它是足够长的，我希望它能够滚动（就像在手机上的景观）。这一点我没有问题

在这个菜单里面有一个子菜单，应该是向侧面突出的。我也能做到，没问题

我不能同时做这两件事——当我使菜单可滚动时，子菜单被剪裁（至少在Chrome中）

如果主菜单是可滚动的，有哪些好的选项（我可以想出一些不吸引人的选项）可以使子菜单不被剪切

这里有一个例子说明了我所说的

函数makeScrollable（）{
var outer=document.getElementById（“outer”）；
outer.style.overflowY=“自动”；
}

ul{
列表样式：无；
边框：1px纯黑；
背景颜色：灰色；
填充：10px；
}
#外{
位置：绝对位置；
右：10px；
最大高度：80px；
}
#内在的{
位置：绝对位置；
右：90%；
}
李{
显示：块；
}

一个
两个


阿尔法
贝塔
伽马射线


三
四
五
六

使外部可滚动

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

流行图书馆的做法（即引导、材料设计）是将子菜单放置在其父菜单之外，通过以下方式进行：

• 根据父元素的

  .getBoundingClientRect（）

  值计算子菜单的位置
• 将子菜单附加到
  元素
• 以及在子菜单打开时禁用滚动
  ，以防止父菜单从固定位置子菜单下移动

---

顺便说一句，我相信你真正的问题是你试图将桌面模式应用到触摸设备上，但这并不会真正起作用

在触摸设备上，菜单必须足够宽大，允许轻敲，而不必担心不会击中预定目标。通常，菜单项应至少为

45px

高

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

子菜单可以在主菜单中以手风琴的形式打开，背景稍有不同，向下推后续的父元素，或在主菜单上以新的菜单层打开，最终以3d进入/退出动画的形式打开，在这种情况下，应通过关闭子菜单返回顶层，轻敲一个慷慨的关闭按钮或按菜单打开的方向滑动

注：我只是在这里初步了解了良好的移动设计原则和实践。确保你（重新）搜索更多关于它的信息，这是一个相当广泛的主题。谷歌是一个很好的起点