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

Question

我正在为移动设备antd-mobile撰写单页应用，

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

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

Answer 1

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

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

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