完美解决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 可以更容易 ...
随机推荐
- 关于Tomcat配置问题
一,部署并启动Tomcat服务器 Tomcat: 开源的 Servlet 容器. 解压 apache-tomcat-6.0.16.zip 到一个非中文目录下 配置一个环境变量. java_home(指 ...
- python 并发编程 多线程 GIL与多线程
GIL与多线程 有了GIL的存在,同一时刻同一进程中只有一个线程被执行 多进程可以利用多核,但是开销大,而python的多线程开销小,但却无法利用多核优势 1.cpu到底是用来做计算的,还是用来做I/ ...
- CentOS7Linux中服务器LVS负载均衡、高可用集群搭建（NAT、DR）；
目录 集群 声明 集群概念 集群特性 Web服务器并发相应瓶颈 集群的分类 LB实现方法: LVS集群 负载调度器 服务器池 共享存储 LVS负载均衡的三种模式 负载均衡 集群 声明 文档不断更新中. ...
- MySQL -2- 体系结构
1. 体系结构 1.1 C/S(客户端/服务端)模型介绍 image TCP/IP方式(远程.本地): mysql -uroot -poldboy123 -h 10.0.0.51 -P3306 S ...
- Luogu P3647 [APIO2014]连珠线
题目 换根dp. 显然对于给定的一棵有根树,蓝线都不能拐弯. 设\(f_{u,0}\)表示\(u\)不是蓝线中点时子树内的答案,\(f_{u,1}\)表示\(u\)是蓝线中点时子树内的答案.(以\(1 ...
- filebeat开启自带模块收集日志如何辨别日志来源等
filebeat启动自带模块后,日志先输出到Redis中 比如开启了system模块日志和redis模块日志 在Redis中查看收集过来的日志时,可以看到如下的这些信息 system日志信息 { &q ...
- vue使用Vuex, IE浏览器报错
错误: [vuex] vuex requires a Promise polyfill in this browser. 原因:因为使用了 ES6 中用来传递异步消息的的Promise,而IE低版本 ...
- 一、JS基本基础
一.主流编辑器 早期 atom 前几年sublime 小巧,轻量,功能插件较多: webstorm 集成开发环境 vscode 免费开源的. 运行环境 : 浏览器端 谷歌,IE,fi ...
- 推荐JavaScript动态效果库
翻译:疯狂的技术宅,原文:https://blog.bitsrc.io/11-javascript-animation-libraries-for-2018-9d7ac93a2c59 当我想要在网上找 ...
- css实现div水平垂直居中
中秋快到了,祝大家中秋快乐. 平时大家写bug过程中肯定会遇到让div框水平或者垂直居中,然而有时候能居中,有时候不能居中.我把平时遇到的一些方法写出来,如果对你有用,那便是晴天. 1.text-al ...