微信浏览器下拉黑边解决方案 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 相关文章推荐
如何实现浏览器上的右键菜单
Jul 10 Javascript
学习jquery必备 api中英文对照的chm手册 下载
May 03 Javascript
window.open的页面如何刷新(父页面)上层页面
Dec 28 Javascript
使用jquery/js获取iframe父子级、同级获取元素的方法
Aug 05 Javascript
vue.js实现含搜索的多种复选框(附源码)
Mar 23 Javascript
详解vue组件化开发-vuex状态管理库
Apr 10 Javascript
微信小程序 setData的使用方法详解
Apr 20 Javascript
使用ionic播放轮询广告的实现方法(必看)
Apr 24 Javascript
原生js实现获取form表单数据代码实例
Mar 27 Javascript
JavaScript工具库之Lodash详解
Jun 15 Javascript
vue中实现Monaco Editor自定义提示功能
Jul 05 Javascript
微信小程序转化为uni-app项目的方法示例
May 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自定义大小验证码的方法详解
2013/06/07 PHP
php实现window平台的checkdnsrr函数
2015/05/27 PHP
深入理解Yii2.0乐观锁与悲观锁的原理与使用
2017/07/26 PHP
php实现对文件压缩简单的方法
2019/09/29 PHP
JavaScript 异步调用框架 (Part 6 - 实例 &amp; 模式)
2009/08/04 Javascript
用jquery修复在iframe下的页面锚点失效问题
2014/08/22 Javascript
JS脚本根据手机浏览器类型跳转WAP手机网站(两种方式)
2015/08/04 Javascript
jquery使用ul模拟select实现表单美化的方法
2015/08/18 Javascript
遮罩层点击按钮弹出并且具有拖动和关闭效果(两种方法)
2015/08/20 Javascript
JS中call/apply、arguments、undefined/null方法详解
2016/02/15 Javascript
jQuery实时显示鼠标指针位置和键盘ASCII码
2016/03/28 Javascript
AngularJS ng-app 指令实例详解
2016/07/30 Javascript
如何在js代码中消灭for循环实例详解
2018/07/29 Javascript
Vue中的作用域CSS和CSS模块的区别
2018/10/09 Javascript
详解Vue2.0组件的继承与扩展
2018/11/23 Javascript
javascript关于“时间”的一次探索
2019/07/24 Javascript
Vue开发环境中修改端口号的实现方法
2019/08/15 Javascript
Python编程之gui程序实现简单文件浏览器代码
2017/12/08 Python
浅谈Pycharm调用同级目录下的py脚本bug
2018/12/03 Python
python几种常用功能实现代码实例
2019/12/25 Python
python中列表的含义及用法
2020/05/26 Python
什么是python的函数体
2020/06/19 Python
Html5大文件断点续传实现方法
2015/12/05 HTML / CSS
前端H5 Video常见使用场景简介
2020/08/21 HTML / CSS
机械专业毕业生推荐信范文
2013/11/25 职场文书
记帐员岗位责任制
2014/02/08 职场文书
销售顾问岗位职责
2014/02/25 职场文书
安全生产活动月方案
2014/03/09 职场文书
演讲稿的格式及范文
2014/08/22 职场文书
融资合作协议书范本
2014/10/17 职场文书
人事主管岗位职责
2015/02/04 职场文书
小学生学习保证书
2015/02/26 职场文书
食品安全责任书范本
2015/05/09 职场文书
JavaScript实现显示和隐藏图片
2021/04/29 Javascript
Redis+AOP+自定义注解实现限流
2022/06/28 Redis
Python 操作pdf pdfplumber读取PDF写入Exce
2022/08/14 Python