APP中内嵌H5滚动条问题

最新推荐文章于 2024-05-22 18:00:57 发布

baby加油_

最新推荐文章于 2024-05-22 18:00:57 发布

阅读量5.2k

点赞数 1

分类专栏： APP与H5 文章标签： APP内嵌H5页面滚动条

本文链接：https://blog.csdn.net/qq_34664239/article/details/83307264

版权

APP与H5 专栏收录该内容

15 篇文章 1 订阅

订阅专栏

前端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>

baby加油_

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
APP中内嵌H5滚动条问题

前端H5有时候会为APP单独写一个单页面，就遇到的问题，做一下总结~首先，会直接做一个长篇的HTML，你会遇到看到，下拉的过程中会有默认的滚动条出现，而且用各种方法去不掉，如图，中间部分是APP中插内嵌的H5，右边会显示滚动条&lt;body&gt; &lt;!--用户协议--&gt; &lt;div class="about_agreement"&gt; ...... &lt...
复制链接

扫一扫