Question

我想避免，用户在我的移动导航栏打开时滚动背景。到目前为止，这没问题，只需在overflow: hidden上设置body即可。问题是，如果导航栏有这么多项目，它高于用户视口，它也不会滚动。所以我希望能够在导航栏中滚动，但不能同时在身体上滚动。

问题是：是否可以更改嵌套元素的overflow行为？

简化示例

// simple helper to add many list items
var menu = document.getElementById('menu');
for(var i=0; i<100; i++) menu.innerHTML += '<li>foo</li>';

.scroll-disabled { overflow: hidden; }
.scroll-enabled { overflow: visible; }

<body class="scroll-disabled">
  <ul class="scroll-enabled" id="menu">
    <!-- lots of li's // more than the display can show at once-->
  </ul>
</body>

Answer 1

您可以为元素指定固定高度并在溢出时设置自动滚动：

.scroll-enabled {height: 100px; overflow:auto;}

Answer 2

只需将overflow: auto与// simple helper to add many list items var menu = document.getElementById('menu'); for(var i=0; i<100; i++) menu.innerHTML += '<li>foo</li>';一起使用即可。这样您就不必设置固定高度，只有当菜单高度大于视口时才会出现滚动。

.scroll-disabled { overflow: hidden; }
.scroll-enabled {
  overflow: auto;
  max-height: 100vh;
}

<body class="scroll-disabled">
  <ul class="scroll-enabled" id="menu">
    <!-- lots of li's // more than the display can show at once-->
  </ul>
</body>

// simple helper to add many list items
var menu = document.getElementById('menu');
for(var i=0; i<8; i++) menu.innerHTML += '<li>foo</li>';

这是一个菜单不超过视口高度的示例。

.scroll-disabled { overflow: hidden; }
.scroll-enabled {
  overflow: auto;
  max-height: 100vh;
}

<body class="scroll-disabled">
  <ul class="scroll-enabled" id="menu">
    <!-- lots of li's // more than the display can show at once-->
  </ul>
</body>

{{1}}

Answer 3

为此，您必须定义ul.scroll-enabled的修复高度，然后使用overflow:auto，以便它可以在ul中滚动。

以下是相同的fiddle示例：）

覆盖嵌套元素上的溢出

3 个答案: