APP中内嵌H5滚动条问题
前端H5有时候会为APP单独写一个单页面,就遇到的问题,做一下总结~
- 首先,会直接做一个长篇的HTML,你会遇到看到,下拉的过程中会有默认的滚动条出现,而且用各种方法去不掉,如图,中间部分是APP中插内嵌的H5,右边会显示滚动条
<body>
<!--用户协议-->
<div class="about_agreement">
......
</div>
</body>
- 加一个div,设置overflow-y: scroll;
这个实际是可以的,但是兼容情况暂时还不知道
这里有个条件,就是你的H5页面的div高度必须小于等于APP框的高度,不然会出现下面的情况,即进入这个页面的一瞬间,会闪现滚动条,这个应该是APP中默认的,改变h5页面那个div的高度,这个会消失
<div class="wrapper">
<!--用户协议-->
<div class="about_agreement">
......
</div>
</div>
.wrapper{
width: 100%;
max-height: 234px;
overflow-y: scroll;
}
//在PC端去掉滚动条
::-webkit-scrollbar{
width: 0px;
height: 0px;
background-color: #fff;
display:none;
}
- 还可以用插件,做出移动端页面的效果,可以上下拉动,这里我用的是better-scroll插件
在显示上特别柔和,在顶部或者尾部还可以上下拉动,实质是运用的css2的transition动画效果,移动端体验更好一些。
better-scroll中文文档
.wrapper{
width: 100%;
max-height: 234px;
overflow-y: hiddden;
}
<script src="js/better-scroll.js" type="text/javascript"></script>
<script type="text/javascript">
var wrapper = document.querySelector('.wrapper')
var scroll = new BScroll(wrapper)
</script>