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

Question

我正在编写一个供移动使用的单页应用程序antd-mobile，

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

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

Answer 1

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

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

2. 使用定义的内容持有者height，并设置overflow-y:scroll。您可以将内容持有者的高度设置为 100vh 减去 Tabbar 的高度。这种方式是“全屏”，然后您可以应用overflow-y:scroll 使该部分可滚动。这将在元素上显示滚动条，而不是整个页面。