微信浏览器下拉黑边解决方案 wScroollFix


Posted in Javascript onJanuary 21, 2020

这篇文章主要介绍了微信浏览器下拉黑边解决方案 wScroollFix,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

开始

由于在开发微信页面的时候下拉黑边的情况很常见,有时候会比较影响体验,因此开发了wScrollFix库,用于隐藏微信下拉的黑边问题

npm地址
github地址

什么是黑边

相信很多在微信上面做网页开发的同学都会发现,当页面被划到顶部或者底部的时候,如果继续滑动,页面会被整个进行下滑,露出上面或者下面的黑底,黑底上面标明了当前访问页面的域名信息,黑边的作用也很明显,由于在微信内浏览器并没有像传统浏览器地址栏那样子的设计,为了在一定程度上面防止钓鱼网站,所以通过下拉显示域名信息,如下图

微信浏览器下拉黑边解决方案 wScroollFix

什么情况下会出现黑边

现象就像上面所说的,如果到了元素的滚动边缘,即元素的scrollTop为0之后继续下滑,或者是到滚动到底部的时候,继续操作就会出现以上的黑边情况。

情况分析

上面我们分析了在微信浏览器中出现黑边的情况,接下去我们聊一聊如何解决,
根据以上的思路,可以分为以下几种情况去解决

对于不需要滚动的页面,我们可以直接将body元素的 touch事件直接preventDefault掉,这样子页面根元素就不会对页面有滚动事件的响应了

第二种情况是页面中有滚动的元素,那么应用于情况1的解决方法就不能用了,用了之后会使得整个页面的滚动失效,因此只能另辟蹊径,回想下我们刚才的黑边的出现情况,在scrollTop为0的时候,继续操作会使得浏览器出现黑边,因此我们可以让滚动的顶部不要到达scrollTop <= 0,还有底部不要到达,这样子上划下划到极限都不会出现黑边了

第三种情况是第二种情况的特殊情况,就是当列表不是静态的,而是动态加载的时候,某些操作,比如在列表加载之前滑动,或者是加载完之后默认的scrollTop为0还继续向上滑动时,可能就会出现黑边

解决方案

对于我封装的wScrollFix库,主要解决的是上面说的情况2和情况3,情况1直接按照上面的做法对touch事件进行绑定就行了
下面我说下解决情况2的方法:代码如下

微信浏览器下拉黑边解决方案 wScroollFix

可以看到这个方法接受一个参数,用于将获取滚动的容器元素,首先将scrollTop设置成1,然后在touchstart,scroll,touchmove事件对页面元素滚动进行检测,确保scrollTop在1和底部高度减1之间,这样子就不会出现黑边

对于情况3,其实就是要在动态列表插入之后能够,能够将scrollTop改成1,这边我用了MutationObserver方案,代码如下:

微信浏览器下拉黑边解决方案 wScroollFix

代码使用了防抖防止插入多次频繁回调,回调的部分的逻辑也比较简单,就是将scrollTop变成1

wScrollFix

封装的wScrollFix使用很简单,可以通过npm i wscrollfix直接进行模块引入,也可以在github直接进行下载引入./dist/wScrollFix.js, 会向全局暴露wScrollFix方法。

使用方法就是把容器元素对象或者选择器作为参数调用wScrollFix,如果有情况3的出现,需要再传一个true,即 wScrollFix(el,true)

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用javascript实现给图片加链接
Aug 15 Javascript
jQuery学习笔记之jQuery+CSS3的浏览器兼容性
Jan 19 Javascript
jquery实现增加删除行的方法
Feb 03 Javascript
简述jQuery ajax的执行顺序
Jan 05 Javascript
JS实现JSON.stringify的实例代码讲解
Feb 07 Javascript
详谈js使用in和hasOwnProperty获取对象属性的区别
Apr 25 Javascript
JavaScript之class继承_动力节点Java学院整理
Jul 03 Javascript
Vue 2.0的数据依赖实现原理代码简析
Jul 10 Javascript
使用vue-resource进行数据交互的实例
Sep 02 Javascript
使用Node.js写一个代码生成器的方法步骤
May 10 Javascript
如何利用vue+vue-router+elementUI实现简易通讯录
May 13 Javascript
k8s node节点重新加入master集群的实现
Feb 22 Javascript
修改vue源码实现动态路由缓存的方法
Jan 21 #Javascript
微信小程序图片自适应实现解析
Jan 21 #Javascript
微信小程序button标签open-type属性原理解析
Jan 21 #Javascript
Vue实现兄弟组件间的联动效果
Jan 21 #Javascript
微信小程序如何通过用户授权获取手机号(getPhoneNumber)
Jan 21 #Javascript
微信小程序如何实现精确的日期时间选择器
Jan 21 #Javascript
微信小程序如何实现点击图片放大功能
Jan 21 #Javascript
You might like
php curl post 时出现的问题解决
2014/01/30 PHP
php中有关字符串的4个函数substr、strrchr、strstr、ereg介绍和使用例子
2014/04/24 PHP
微信营销平台系统?刮刮乐的开发
2014/06/10 PHP
PHP如何实现跨域
2016/05/30 PHP
PHP数组式访问接口ArrayAccess用法分析
2017/12/28 PHP
PHP实现生成数据字典功能示例
2018/05/24 PHP
PHP实现简单用户登录界面
2019/10/23 PHP
JS跨域总结
2012/08/30 Javascript
Js 时间函数getYear()的使用问题探讨
2013/04/01 Javascript
jQuery动画效果-fadeIn fadeOut淡入浅出示例代码
2013/08/28 Javascript
Egret引擎开发指南之运行项目
2014/09/03 Javascript
JavaScript实现Java中StringBuffer的方法
2015/02/09 Javascript
在父页面得到zTree已选中的节点的方法
2015/02/12 Javascript
JavaScript中计算网页中某个元素的位置
2015/06/10 Javascript
jQuery中animate()的使用方法及解决$(”body“).animate({“scrollTop”:top})不被Firefox支持的问题
2017/04/04 jQuery
Javascript中 toFixed四舍六入方法
2017/08/21 Javascript
jquery如何实现点击空白处隐藏元素
2017/12/05 jQuery
详解JS数值Number类型
2018/02/07 Javascript
jQuery创建折叠式菜单
2019/06/15 jQuery
js动态获取时间的方法分析
2019/08/02 Javascript
JS实现简单的表格增删
2020/01/16 Javascript
autojs 蚂蚁森林能量自动拾取即给指定好友浇水的实现方法
2020/05/03 Javascript
vue项目接口管理,所有接口都在apis文件夹中统一管理操作
2020/08/13 Javascript
Python中函数的多种格式和使用实例及小技巧
2015/04/13 Python
Python构建网页爬虫原理分析
2017/12/19 Python
python tensorflow学习之识别单张图片的实现的示例
2018/02/09 Python
Python函数装饰器实现方法详解
2018/12/22 Python
Python自定义聚合函数merge与transform区别详解
2020/05/26 Python
html5本地存储之localstorage 、本地数据库、sessionStorage简单使用示例
2014/05/08 HTML / CSS
爸爸的花儿落了教学反思
2014/02/20 职场文书
大学拉赞助协议书范文
2014/09/26 职场文书
职工年度考核评语
2014/12/31 职场文书
岁月神偷观后感
2015/06/11 职场文书
用position:sticky完美解决小程序吸顶问题的实现方法
2021/04/24 HTML / CSS
Python编写可视化界面的全过程(Python+PyCharm+PyQt)
2021/05/17 Python
如何理解python接口自动化之logging日志模块
2021/06/15 Python