H5之移动端如何让滚动条不隐藏

移动端H5实现滚动条显示策略

原创

已于 2023-01-15 01:30:57 修改 · 2.5k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #css

于 2023-01-12 13:21:48 首次发布

当在移动端H5页面遇到需要显示滚动条的需求时，发现overflow-y: scroll;在真机上无效。经过搜索了解到，手机浏览器不支持自定义滚动条样式，解决方案是采用iScroll框架。集成iScroll需要确保滚动视图容器大小固定，overflow:hidden，内部有一个滚动容器，内容放于滚动容器内，并在DOM加载完成后初始化iScroll。

背景

需求如下图，就一个弹窗，里面的内容随着内容溢出，需要显示滚动条，使用户更好地感知下面还有内容。

解决过程

刚开始一看，这不很简单吗，给content区域加个 overflow-y: scroll; 就完事了。搞完之后在谷歌浏览器的模拟手机面确实成功了，以为OK，但放到真机上面一看，滚动条却没有显示。心里一颤，这咋回事，见鬼了？

然后在想，是不是其他地方改变了滚动条的显示。找了一圈，也没有啊。实在没什么头绪，只能硬着头皮去搜索引擎找原因。

一开始是找到了这种答案，没用：

// 基本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;  
}

最低0.47元/天解锁文章