APP中内嵌H5滚动条问题

前端H5有时候会为APP单独写一个单页面,就遇到的问题,做一下总结~

  1. 首先,会直接做一个长篇的HTML,你会遇到看到,下拉的过程中会有默认的滚动条出现,而且用各种方法去不掉,如图,中间部分是APP中插内嵌的H5,右边会显示滚动条
    APP中内嵌H5滚动条问题_第1张图片
<body>
	<!--用户协议-->
	<div class="about_agreement">
		......
	</div>
</body>
  1. 加一个div,设置overflow-y: scroll;
    这个实际是可以的,但是兼容情况暂时还不知道
    这里有个条件,就是你的H5页面的div高度必须小于等于APP框的高度,不然会出现下面的情况,即进入这个页面的一瞬间,会闪现滚动条,这个应该是APP中默认的,改变h5页面那个div的高度,这个会消失
    APP中内嵌H5滚动条问题_第2张图片
<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;
}
  1. 还可以用插件,做出移动端页面的效果,可以上下拉动,这里我用的是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>

你可能感兴趣的:(APP与H5)