How to make the scroll bar not hidden on the mobile terminal of H5

background

The requirements are as shown in the figure below. It is just a pop-up window. The content inside overflows with the content, and scroll bars need to be displayed to make users better perceive that there is still content below.

resolution process

At first glance, isn’t this very simple, just add overflow-y: scroll; to the content area and you’re done. After finishing it, it was indeed successful on the simulated phone screen of Google Chrome, and I thought it was OK, but when I put it on the real phone, the scroll bar did not appear. My heart trembled, what's going on, what the hell?

Then I wonder if the display of the scroll bar has been changed elsewhere. I searched around, but nothing. I really have no clue, so I can only bite the bullet and go to the search engine to find the reason.

At the beginning, I found this kind of answer, which was useless:

// 基本css代码
overflow-y: scroll; // 滚动显示
-webkit-overflow-scrolling: touch;  // 滚动回弹

/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/  
&::-webkit-scrollbar  
{  
    width: 16px;  
    height: 16px;  
    background-color: #F5F5F5;  
}  
  
/*定义滚动条轨道 内阴影+圆角*/  
&::-webkit-scrollbar-track  
{  
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);  
    border-radius: 10px;  
    background-color: #F5F5F5;  
}  
  
/*定义滑块 内阴影+圆角*/  
&::-webkit-scrollbar-thumb  
{  
    border-radius: 10px;  
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);  
    background-color: #555;  
}

After tossing around again, I found a question and answer on StackOverflow: html - Mobile webkit scroll bars - Stack Overflow

It turns out that mobile phone browsers do not support custom scroll, and it only takes effect on PC-side browsers. It is recommended to use the iScroll framework to deal with this problem on the mobile side.

Integrated iScroll

There are three conditions that a scroll view container needs to meet:

The size of the scroll view is fixed, and overflow:hidden is set
Set a layer of scrolling container inside the scrolling view. If you need to scroll on the x-axis, you need to set the width beyond the scrolling view
All content that needs to be scrolled is placed inside the scroll container

Issues to be aware of:

iScroll needs to be initialized after the DOM is loaded. The initialization of iScroll in the vue component must be in the mounted hook function, and use this.$nextTick() callback. You can also use setTimeout to delay the initialization of iScroll.