Mini Program Advanced-How to remove or hide the page scroll bar

Preface

  When the content displayed on the mini program page exceeds the screen height or width, and we want to see all the content, we must use page scrolling. However, we found that the scroll bar for scrolling the page is particularly abrupt and ugly, and most of the small programs have removed the scroll bar. So, how do we remove the scroll bar?

Option One

  We know that when the displayed content exceeds the page height, the page's default scroll bar will be triggered. As follows:

In the mini program community, I found a solution:

look at the code:
index.wxss

.intro{
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  margin: auto;
}
.sub{
  height: 100%;
  width: calc(100vw + 6px);
  overflow-x: hidden;
}

index.wxml

<view class="intro">
	<view class="sub">
		页面内容
	</view>
</view>

In short, it hides the scroll bar very well! ! ! ! !

Option II

Of course, we should use scroll-view more, and the method of hiding the scroll bar is also very simple.
We can add the following code to app.wxss (global) or current page.wxss:

::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
  color: transparent;
}

It is worth noting:

<scroll-view
  scroll-y style="width: 100%; height: 100%;"
>
</scroll-view>

Do not set the scroll-view height to a relative height, such as 100%. Otherwise, the scroll bar of the page page will appear again! ! !
We can do this:

<scroll-view
  scroll-y style="width: 100%; height: 100vh;"
>
</scroll-view>

If it still doesn't work, reduce the value of height, for example, set it to height:99vh. If the scroll-view height is greater than the page height, scroll bars will still appear.
Remember to set the parent element such as page:

overflow: hidden;