完美解决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 可以更容易 ...
随机推荐
- 【VS开发】浅谈UDP(数据包长度，收包能力，丢包及进程结构选择)
UDP数据包长度 UDP数据包的理论长度 udp数据包的理论长度是多少,合适的udp数据包应该是多少呢?从TCP-IP详解卷一第11章的udp数据包的包头可以看出,udp的最大包长度是2^16-1的个 ...
- flask第一级
#从flask这个包中导入Flask这个类 #Flask这个类是项目的核心,以后很多操作都是基于这个类的对象 #注册url.注册蓝图等都是基于这个类的对象 from flask import Flas ...
- C语言I博客作业12-学期总结
一.我学到的内容 二.我的收获 1. https://www.cnblogs.com/1076022899-lj/p/11576442.html 收获:第一次接触到C语言和PTA,第一次学习了博客园和 ...
- CentOS 上面 恢复 Oracle 数据库实例的简单操作流程
1. 当获取了数据库的备份可以进行 oracle数据库的备份恢复操作 linux上面要复杂一些. 这里面简单描述一下. 2. 远程连接 linux 主要工具可以选择 xshell 如图示: 3. 建议 ...
- Process进程 ProcessStartInfo.UseShellExecute 属性
https://docs.microsoft.com/zh-cn/previous-versions/dotnet/netframework-1.1/k7z89z41(v=vs.80) 启动进程示例: ...
- pair常见用法
pair的使用 关于pair 什么是pair 可以将pair看做一个内部有两个元素的结构体,且两个元素的类型是可以指定的. struct pair{ typename1 first; typename ...
- HDU 1401 Solitaire 双向DFS
HDU 1401 Solitaire 双向DFS 题意 给定一个\(8*8\)的棋盘,棋盘上有4个棋子.每一步操作可以把任意一个棋子移动到它周围四个方向上的空格子上,或者可以跳过它四个方向上的棋子(就 ...
- 匿名函数lambda和map函数
一.map函数,实现迭代操作 map(f1,x) f1为函数的名称(不加括号),x为map的参数,示例如下: def add(a): return a+10 print map(add,[1,2,3] ...
- 如何导入GitHub下的vue项目 并启动
如何运行 下载的GitHub项目 一 准备工作: Node.js环境(npm包管理器) vue-cli 脚手架构建工具 cnpm npm的淘宝镜像 二 安装node.js 略 cmd 输入node ...
- 编写优秀 CSS 代码的 8 个策略
编写基本的CSS和HTML是我们作为Web开发人员学习的首要事情之一.然而,我遇到的很多应用程序显然没有人花时间真正考虑前端开发的长久性和可维护性. 我认为这主要是因为许多开发人员对组织CSS / H ...