微信浏览器下拉黑边的终极解决方案---wScroollFix

开始

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

什么是黑边

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

什么情况下会出现黑边

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

情况分析

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

  1. 对于不需要滚动的页面,我们可以直接将body元素的 touch事件直接preventDefault掉,这样子页面根元素就不会对页面有滚动事件的响应了
  2. 第二种情况是页面中有滚动的元素,那么应用于情况1的解决方法就不能用了,用了之后会使得整个页面的滚动失效,因此只能另辟蹊径,回想下我们刚才的黑边的出现情况,在scrollTop为0的时候,继续操作会使得浏览器出现黑边,因此我们可以让滚动的顶部不要到达scrollTop <= 0,还有底部不要到达,这样子上划下划到极限都不会出现黑边了
  3. 第三种情况是第二种情况的特殊情况,就是当列表不是静态的,而是动态加载的时候,某些操作,比如在列表加载之前滑动,或者是加载完之后默认的scrollTop为0还继续向上滑动时,可能就会出现黑边

解决方案

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

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

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

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

wScrollFix

封装的wScrollFix使用很简单,可以通过npm i wscrollfix直接进行模块引入,也可以在github直接进行下载引入./dist/wScrollFix.js, 会向全局暴露wScrollFix方法。
使用方法就是把容器元素对象或者选择器作为参数调用wScrollFix,如果有情况3的出现,需要再传一个true,即 wScrollFix(el,true)

上面有wScrollFix的github和npm地址,上去给个star呗各位看官~

原文地址:https://www.cnblogs.com/homehtml/p/12194556.html

时间: 2024-10-25 21:44:13

微信浏览器下拉黑边的终极解决方案---wScroollFix的相关文章

js禁止微信浏览器下拉显示黑底查看网址,不影响内部Scroll

开发项目跑在微信浏览器经常会遇到一个问题,微信浏览器下拉的时候会出现自带的黑色底色(显示网址)如下图: 网上好多js禁止操作的做法禁止了内部Scroll,导致页面不能滚动,上拉加载失效,例如这种做法: $('body').on('touchmove', function (event) {event.preventDefault();}); or document.addEventListener('touchmove', function(e){e.preventDefault()}, fal

完美解决safari、微信浏览器下拉回弹效果。

完美解决safari.微信浏览器下拉回弹效果,只保留局部回弹效果. CSS代码 .box{ overflow: auto; -webkit-overflow-scrolling: touch; } HTML代码 <body class="box"> <div class="scroll" style="height:1500px"> </div> </body> JS代码 var overscrol

阻止微信浏览器下拉滑动效果(ios11.3 橡皮筋效果)

在升级到 ios11.3 系统后,发现之前阻止页面滚动的代码e.preventDefault代码失效了.于是自己折腾了一番,找到了解决办法,分享给大家. 一.前言 浏览器在移动端有一个默认触摸滚动的效果,让我们感触最深的莫过于微信浏览器里面,下拉时自带橡皮筋的效果. 然而在开发的时候我们经常需要阻止此效果. 在此先直接给一个方案,直接加上下面的代码即可: document.body.addEventListener('touchmove', function (e) { e.preventDef

关于苹果手机中,微信浏览器下拉弹动的解决

/*ios微信浏览器上下滚动兼容性问题解决 end*/$(function () {//DOM文档加载完执行 wxScrollSolve(document.querySelector('.MainCon'));});function wxScrollSolve(scrollWrapObj) {//Scrollobj要滚动的内容外部包裹的容器对象 if(scrollWrapObj==""||scrollWrapObj==undefined||scrollWrapObj==null){ r

禁止微信浏览器下拉弹性效果

很简单,代码如下: document.querySelector('body').addEventListener('touchstart', function (ev) { ev.preventDefault(); });

iOS 微信右上角下拉菜单效果之CMPopTipView,各种角度各种位置

早之前在项目中写了一个类似微信右上角下拉的菜单封装,但是是写死的,当时根本 没有考虑到去其他地方弹出这个东西,虽然看起来弹个窗出来很简单,但是你位子不确 定之后弹出来是有点麻烦的,反正我总是觉得,我们能想到的,老外早就想到了,多给自己弄点工具库,多看看源码,指不定哪天我也搞出一个库来,世界 上有项目经理这种东西,那就没有什么需求是不可能的,各位手头上多准备点工具还是非常有必要的. 先看图: 需求是这样的,点击分类的按钮,竟然不Push到另一个VC去,非要弹个窗出来 但是像我这样的读书人这么有素质

webpack使用vue-moment-libs 在PC微信浏览器下显示空白

在chrome或者手机端,web应用显示正常,但在PC微信端不能显示,空白的. 通过测试IE9版本,也是显示空白的. 网络上说是PC微信浏览器不支持语法糖 ()=>{}  但是我看我这边是因为我使用了vue-moment-lib组件,这个组件生成的错误语句如下图 这个时候ES6的语法,IE9不支持,PC端也应该是IE9的内核. 最终解决:后来我是因为把moment改为了dayjs,所以解决了问题. 说说我是怎么定位到vue-moment-lib组件的锅的. 在IE中显示的错误是 点击保存的那行,

微信浏览器下提供的分享回调

<script type="text/javascript">         // 所有功能必须包含在 WeixinApi.ready 中进行 WeixinApi.ready(function(Api) {             // 隐藏右上角popup菜单入口             //Api.hideOptionMenu();             // 隐藏浏览器下方的工具栏             //Api.hideToolbar();         

微信浏览器下动态修改 微信title

var $body = $('body'); document.title = 'title' // hack在微信等webview中无法修改document.title的情况 var $iframe = $('<iframe src="/favicon.ico"></iframe>').on('load', function() { setTimeout(function() { $iframe.off('load').remove() }, 0) }).ap