微信小程序 - 请教一下，小程序滚动条不占用页面空间如何实现？

Question

问题：
很多小程序都有类似的滚动条，滑动的时候显示，不滑动的时候隐藏（在手机和电脑微信小程序都有这样的效果），而且不占用页面空间，如上’多点‘商城小程序。这种效果怎么实现的？

Answer 1

可以隐藏起来:

https://developers.weixin.qq.com/community/develop/doc/000a20...

Answer 2

这种效果可以通过在 CSS 中使用 scrollbar-width 和 ::-webkit-scrollbar 实现。

以下是一个简单的示例：

body {  /* 隐藏滚动条 */  scrollbar-width: none; /* Firefox */  ::-webkit-scrollbar {    display: none; /* Chrome, Safari and Opera */  }}/* 创建一个可滚动的区域 */.scrollable {  width: 100%;  height: 100%;  overflow: auto;}

在 HTML 中，您需要将 .scrollable 类应用于任何您希望具有滚动条的区域。例如：

<div class="scrollable">  <!-- your content here --></div>

这将隐藏滚动条，但仍然允许您在需要时滚动。当您在小程序中滑动时，滚动条会显示，不滑动时会隐藏。注意，这种方法可能不会在所有浏览器中都有效。