微信浏览器下拉黑边解决方案 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 动态修改样式和层叠样式表代码
Apr 27 Javascript
jquery的$(document).ready()和onload的加载顺序
May 26 Javascript
简单的jQuery banner图片轮播实例代码
Mar 04 Javascript
网页前端登录js按Enter回车键实现登陆的两种方法
May 10 Javascript
底部悬浮通栏可以关闭广告位的实现方法
Jun 01 Javascript
JavaScript判断浏览器对CSS3属性是否支持的多种方法
Nov 13 Javascript
js实现交通灯效果
Jan 13 Javascript
jQuery Position方法使用和兼容性
Aug 23 jQuery
基于jQuery中ajax的相关方法汇总(必看篇)
Nov 08 jQuery
给localStorage设置一个过期时间的方法分享
Nov 06 Javascript
JS中自定义事件的使用与触发操作实例分析
Nov 01 Javascript
Laravel 如何在blade文件中使用Vue组件的示例代码
Jun 28 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 echo 输出字符串函数详解
2010/05/13 PHP
php数组函数序列之asort() - 对数组的元素值进行升序排序,保持索引关系
2011/11/02 PHP
Session的工作机制详解和安全性问题(PHP实例讲解)
2014/04/10 PHP
PHP函数checkdnsrr用法详解(Windows平台用法)
2016/03/21 PHP
Javascript 构造函数,公有,私有特权和静态成员定义方法
2009/11/30 Javascript
jquery一句话全选/取消全选
2011/03/01 Javascript
js 程序执行与顺序实现详解
2013/05/13 Javascript
jQuery(js)获取文字宽度(显示长度)示例代码
2013/12/31 Javascript
用于deeplink的js方法(判断手机是否安装app)
2014/04/02 Javascript
jquery单行文字向上滚动效果的实现代码
2014/09/05 Javascript
让JavaScript和其它资源并发下载的方法
2014/10/16 Javascript
Angularjs material 实现搜索框功能
2016/03/08 Javascript
js选项卡的制作方法
2017/01/23 Javascript
jQuery实现页面倒计时并刷新效果
2017/03/13 Javascript
简单实现JS上传图片预览功能
2017/04/14 Javascript
js代码规范之Eslint安装与配置详解
2018/09/08 Javascript
JS/jQuery实现简单的开关灯效果【案例】
2019/02/19 jQuery
微信公众平台 发送模板消息(Java接口开发)
2019/04/17 Javascript
关于AOP在JS中的实现与应用详解
2019/05/06 Javascript
BootStrap表单验证中的非Submit类型按钮点击时触发验证的坑
2019/09/05 Javascript
Vue组件通信入门之Provide和Inject机制
2019/12/29 Javascript
JavaScript语法约定和程序调试原理解析
2020/11/03 Javascript
代码块高亮可复制显示js插件highlight.js+clipboard.js整合
2021/02/15 Javascript
[44:21]Ti4 循环赛第四日 附加赛NEWBEE vs LGD
2014/07/13 DOTA
python线程中的同步问题及解决方法
2019/08/29 Python
python thrift 实现 单端口多服务的过程
2020/06/08 Python
Mio Skincare美国官网:身体紧致及孕期身体护理
2017/03/05 全球购物
ROSEFIELD手表荷兰官方网上商店:北欧极简设计女士腕表品牌
2018/01/24 全球购物
人事部主管岗位职责
2013/12/26 职场文书
学生党支部先进事迹
2014/02/04 职场文书
奥林匹克运动会口号
2014/06/19 职场文书
2014教师党员个人自我评议
2014/09/20 职场文书
关于对大人不礼貌的检讨书
2014/09/29 职场文书
班主任开场白
2015/06/01 职场文书
公司员工宿舍管理制度
2015/08/03 职场文书
Debian11 Xfce终端光标的颜色怎么设置?
2022/08/14 数码科技