Method of hiding scroll bar in wechat applet

When the content displayed on the applet page exceeds the screen height or width , We want to see everything , At this time, you must use page scrolling . But , We found that the scroll bar of the scrolling page is particularly abrupt and ugly , And refer to most small programs that remove the scroll bar . that , How do we get rid of the scroll bar ？

When the display content exceeds the page height , Will trigger page Default scroll bar . as follows ：

scroll-view, The method of hiding the scroll bar is also very simple .
We can do it in app.wxss（ overall situation ） Or the current page .wxss Add the following code ：

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

Be careful ：

scroll-view Do not set the height to relative height , Such as 100%. otherwise ,page The scroll bar of the page will appear again ！！！
You can do this ：

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

If it still doesn't work , Reduce height Value , For example, set to height:99vh.scroll-view The height is greater than page Scroll bars will still appear at the height .

Parent element such as page Remember to set up ：

overflow: hidden;