如何在移动浏览器上定义特定的滚动区域？

Question

我正在编写一个用于移动设备的单页应用antd-mobile ，

页面底部有一个标签栏，您可以看到背景的项目列表是灰色的，问题是当我向下滚动到底部时，标签栏覆盖了内容。

如何使列表区域成为滚动区域而不是整个页面？

Answer 1

一些代码可以帮助我们为您提供帮助...但是您可以使用多种策略，所有策略都取决于您的实际代码和您希望实现的目标。

1. 在body上使用margin-bottom 。 将页面边缘的边距设置为Tabbar的高度，这将确保它永远不会隐藏底部内容。 那是假设您的Tabbar处于固定位置。 此解决方案将使滚动条显示在整个页面上。

2. 使用定义的内容保持器height ，并设置overflow-y:scroll 。 您可以将您的内容载体的高度是100vh减去你的TabBar的高度。 这样，它是“全屏”，然后可以应用overflow-y:scroll使该部分可滚动。 这将在元素上而不是整个页面上显示滚动条。