微信浏览器下拉黑边解决方案 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 相关文章推荐
Google Map API更新实现用户自定义标注坐标
Jul 29 Javascript
MooTools 页面滚动浮动层智能定位实现代码
Aug 23 Javascript
jquery使用淘宝接口跨域查询手机号码归属地实例
Nov 28 Javascript
uploadify多文件上传参数设置技巧
Nov 16 Javascript
javascript原型继承工作原理和实例详解
Apr 07 Javascript
JS中的进制转换以及作用
Jun 26 Javascript
jquery层级选择器(匹配父元素下的子元素实现代码)
Sep 05 Javascript
值得分享的JavaScript实现图片轮播组件
Nov 21 Javascript
JS计算两个数组的交集、差集、并集、补集(多种实现方式)
May 21 Javascript
layui+SSM的数据表的增删改实例(利用弹框添加、修改)
Sep 27 Javascript
JavaScript实现随机点名器
Mar 25 Javascript
基于javascript的无缝滚动动画实现2
Aug 07 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中mysql模块部分功能的简单封装
2011/09/30 PHP
在WordPress中获取数据库字段内容和添加主题设置菜单
2016/01/11 PHP
PHPCMS手机站伪静态设置详细教程
2017/02/06 PHP
javascript中的几个运算符
2007/06/29 Javascript
网页和浏览器兼容性问题汇总(draft1)
2009/06/01 Javascript
JS DOM 操作实现代码
2010/08/01 Javascript
JavaScript flash复制库类 Zero Clipboard
2011/01/17 Javascript
关于JS中的闭包浅谈
2013/08/23 Javascript
JS不能跨域借助jquery获取IP地址的方法
2014/08/20 Javascript
Javascript核心读书有感之类型、值和变量
2015/02/11 Javascript
将 vue 生成的 js 上传到七牛的实例
2017/07/28 Javascript
three.js中3D视野的缩放实现代码
2017/11/16 Javascript
vue实现验证码输入框组件
2017/12/14 Javascript
jQuery使用each遍历循环的方法
2018/09/19 jQuery
JS复杂判断的更优雅写法代码详解
2018/11/07 Javascript
nodejs如何在package.json中设置多条启动命令
2020/03/16 NodeJs
[01:06:54]DOTA2-DPC中国联赛 正赛 RNG vs Dragon BO3 第一场 1月24日
2021/03/11 DOTA
python获得文件创建时间和修改时间的方法
2015/06/30 Python
Python使用bs4获取58同城城市分类的方法
2015/07/08 Python
由浅入深讲解python中的yield与generator
2017/04/05 Python
Django ManyToManyField 跨越中间表查询的方法
2018/12/18 Python
python循环定时中断执行某一段程序的实例
2019/06/29 Python
python数据分析:关键字提取方式
2020/02/24 Python
Python selenium如何打包静态网页并下载
2020/08/12 Python
pytorch学习教程之自定义数据集
2020/11/10 Python
澳大利亚家居用品零售商:Harris Scarfe
2020/10/10 全球购物
简单说说tomcat的配置
2013/05/28 面试题
自主招生自荐信范文
2013/12/04 职场文书
教师自荐信
2013/12/10 职场文书
主持人婚宴答谢词
2014/01/28 职场文书
应届大专生自荐书
2014/06/16 职场文书
街道务虚会发言材料
2014/10/20 职场文书
邀请函怎么写
2015/01/30 职场文书
2015年度物流工作总结
2015/04/30 职场文书
创业计划书之电动车企业
2019/10/11 职场文书
PostgreSQL之连接失败的问题及解决
2023/05/08 PostgreSQL