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

Question

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

​

​

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

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

Answer 1

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

1. 在body上使用margin-bottom。这将在页面底部添加边距，并将其设置为Tabbar的高度，这将确保它永远不会隐藏底部内容。这是假设你的Tabbar是在一个固定的位置。此解决方案将使滚动条显示在整个页面上。
2. 使用已定义的内容持有者height，并设置overflow-y:scroll。您可以将内容容器的高度设置为100vh减去Tabbar的高度。这样它就是“全屏”的，然后你可以应用overflow-y:scroll来使该部分可滚动。这将在元素上显示滚动条，而不是整个页面。