在做公司手机端官网时,在微信浏览器打开时,出现下图这种情况:微信浏览器出现自带的下拉弹性效果,导致自己写的下拉刷新功能出现问题。 为了解决这个问题,网上提供的解决方法基本是: 或者: 这是很暴力的做法,虽然是把下拉弹性效果禁止了,可是也把页面里的滚动条禁止了,导致网页不能滚屏。 经过了解。微信下拉弹性效果其实是浏览器本身的一种特性。 而下拉回弹是touchmove事件的一种默认属性,根据这个,只要 ...
2017-03-06 16:57 0 3335 推荐指数:
此类事件是手机touchmove默认事件行为,可以通过js代码隐藏事件: 当你在网上查找解决微信浏览器禁止页面出现下拉之类的关键字的时候,上面这些都是常见的结果。但是,这些东西其实用起来并不能解决问题,它们会把整个页面所有的滚动事件全部禁止掉,如果你页面 ...
开发项目跑在微信浏览器经常会遇到一个问题,微信浏览器下拉的时候会出现自带的黑色底色(显示网址)如下图: 网上好多js禁止操作的做法禁止了内部Scroll,导致页面不能滚动,上拉加载失效,例如这种做法: 查阅了资料然后进行了修改,于是得到以下解决方案,可以达到禁止微信黑底 ...
在升级到 ios11.3 系统后,发现之前阻止页面滚动的代码e.preventDefault代码失效了。于是自己折腾了一番,找到了解决办法,分享给大家。 一、前言 浏览器在移动端有一个默认触摸滚动的效果,让我们感触最深的莫过于微信浏览器里面,下拉时自带橡皮筋的效果。 然而在开发 ...
开发项目跑在微信浏览器经常会遇到一个问题,微信浏览器下拉的时候会出现自带的黑色底色(显示网址)如下图: 此类事件是手机touchmove默认事件行为,可以通过js代码隐藏事件: 但这样往往会把页面原生的scroll效果也一同去掉了,下面的代码可以完美解决这个问题 ...
完美解决safari、微信浏览器下拉回弹效果,只保留局部回弹效果。 CSS代码 .box{ overflow: auto; -webkit-overflow-scrolling: touch; } HTML代码 <body class="box"> <div class ...
CSS代码: HTML代码: JS代码: ...
禁止iOS的弹性滚动 微信的下拉回弹 一种方法: html头部添加 然后将页面body的高度设为window的高度 其他方法 页面高度超过设备可见高度时,阻止掉touchmove事件。 https://segmentfault.com/q ...