完美解决safari、微信浏览器下拉回弹效果。
完美解决safari、微信浏览器下拉回弹效果，只保留局部回弹效果。
CSS代码
.box{
overflow: auto;
-webkit-overflow-scrolling: touch;
}HTML代码
<body class="box">
<div class="scroll" style="height:1500px">
</div>
</body>JS代码
var overscroll = function(el) {
el.addEventListener('touchstart', function() {
var top = el.scrollTop
,totalScroll = el.scrollHeight
,currentScroll = top + el.offsetHeight;
if(top === 0) {
el.scrollTop = 1;
}else if(currentScroll === totalScroll) {
el.scrollTop = top - 1;
}
}); el.addEventListener('touchmove', function(evt) {
if(el.offsetHeight < el.scrollHeight)
evt._isScroller = true;
});
} overscroll(document.querySelector('.scroll'));
document.body.addEventListener('touchmove', function(evt) {
if(!evt._isScroller) {
evt.preventDefault();
}
});
参考网址：https://segmentfault.com/a/1190000007301527
完美解决safari、微信浏览器下拉回弹效果。的更多相关文章
- 完美解决safari、微信浏览器下拉回弹效果
CSS代码: .box{ overflow: auto; -webkit-overflow-scrolling: touch; } HTML代码: <body class="box&q ...
- 阻止微信浏览器下拉滑动效果（ios11.3 橡皮筋效果）
在升级到 ios11.3 系统后,发现之前阻止页面滚动的代码e.preventDefault代码失效了.于是自己折腾了一番,找到了解决办法,分享给大家. 一.前言 浏览器在移动端有一个默认触摸滚动的效 ...
- js禁止微信浏览器下拉显示黑底查看网址，不影响内部Scroll
开发项目跑在微信浏览器经常会遇到一个问题,微信浏览器下拉的时候会出现自带的黑色底色(显示网址)如下图: 网上好多js禁止操作的做法禁止了内部Scroll,导致页面不能滚动,上拉加载失效,例如这种做法: ...
- [转]js禁止微信浏览器下拉显示黑底查看网址，不影响内部Scroll
原贴:https://www.cnblogs.com/jasonwang2y60/p/6848464.html 原贴:https://www.cnblogs.com/jasonwang2y60/p/6 ...
- js禁止微信浏览器下拉显示黑底查看网址
// 首先禁止body document.body.ontouchmove = function (e) { e.preventDefault(); }; // 然后取得触摸点的坐标 var star ...
- 完美解决，浏览器下拉显示网址问题 | 完美解决，使用原生 scroll 写下拉刷新
在 web 开发过程中我们经常遇到,不想让用户下拉看到我的地址,也有时候在 div 中没有惯性滚动,就此也出了 iScroll 这种关于滚动条的框架,但是就为了一个体验去使用一个框架好像又不值得,今天 ...
- 使用NestedScrollView+ViewPager+RecyclerView+SmartRefreshLayout打造酷炫下拉视差效果并解决各种滑动冲突
使用NestedScrollView+ViewPager+RecyclerView+SmartRefreshLayout打造酷炫下拉视差效果并解决各种冲突 如果你还在为处理滑动冲突而发愁,那么你需要静 ...
- 微信小程序 - IOS 仿饿了么"我的",下拉橡皮筋效果
这个需求是在wepy交流群里有群友提到的. 一个小花样. 注册mixins /** * IOS专用 顶部下拉橡皮筋效果 * 安卓的Page在到达顶部的时候,不能继续下拉...略过 * * 效果见 饿了 ...
- 推荐10个 CSS3 制作的创意下拉菜单效果
下拉菜单是一个很常见的效果,在网站设计中被广泛使用.通过使用下拉菜单,设计者不仅可以在网站设计中营造出色的视觉吸引力,但也可以为网站提供了一个有效的导航方案.使用 HTML5 和 CSS3 可以更容易 ...
随机推荐
- Mybatis--<![CDATA[ sql 语句 ]]>
在mapper文件中写sql语句时,遇到特殊字符时,如:< 等,建议使用<![CDATA[ sql 语句 ]]>标记,将sql语句包裹住,不被解析器解析 在使用mybatis 时 ...
- 第七周课程总结&实验报告
课程总结 主要学习了抽象类与接口的应用 1.抽象类的成员可以具有访问级别 接口的成员全部public级别 2.抽象类可以包含字段 接口不可以 3.抽象类可以继承接口 接口不能继承抽象类 4.抽象类的成 ...
- openvswitch笔记
下载解压sudo wget http://openvswitch.org/releases/openvswitch-2.4.1.tar.gztar -xvf openvswitch-2.4.1.tar ...
- DataLinkLayer(数据链路层)
DataLinkLayer(数据链路层) The Reference Model(参考模型) layer name 5 Application layer 4 TransPort layer 3 Ne ...
- CF 11D A Simple Task 题解
题面 这道题的数据范围一看就是dfs或状压啦~ 本文以状压的方式来讲解 f[i][j]表示目前的节点是i,已经经历过的节点的状态为j的简单环的个数: 具体的转移方程和细节请看代码: PS:(i& ...
- 数据库中的round()
Round函数返回一个数值,该数值是按照指定的小数位数进行四舍五入运算的结果.可是当保留位跟着的即使是5,有可能进位,也有可能舍去,机会各50%.这样就会造成在应用程序中计算有误. 参数规范 语法 r ...
- 《一头扎进》系列之Python+Selenium自动化测试框架实战篇6 - 价值好几K的框架，呦！这个框架还真牛叉哦！！！
1. 简介 本文开始介绍如何通过unittest来管理和执行测试用例,这一篇主要是介绍unittest下addTest()方法来加载测试用例到测试套件中去.用addTest()方法来加载我们测试用例到 ...
- js 类型转变
在绝大部分情况下,操作符和函数可以自动将一个值转换成正确的数据类型.这被称为"类型转变(type conversion)". 举个例子,alert 自动转变任何类型的参数为字符串类 ...
- 关于hstack和Svstack
关于hstack和Svstack import numpy as np>>> a = np.array((1,2,3))>>> aarray([1, 2, 3])& ...
- Eclipse 配置 tomcat
1.第一步 去官网下载 进入点击 Downloads 点击如图位置下载 我下载的是 apache-tomcat-7.0.82.zip(图片中不是,但都是一样的) 我解压到D:\tomcat\apach ...