完美解决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 === ) {
el.scrollTop = ;
}else if(currentScroll === totalScroll) {
el.scrollTop = top - ;
}
});
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();
}
});
完美解决safari、微信浏览器下拉回弹效果的更多相关文章
- 完美解决safari、微信浏览器下拉回弹效果。
完美解决safari.微信浏览器下拉回弹效果,只保留局部回弹效果. CSS代码 .box{ overflow: auto; -webkit-overflow-scrolling: touch; } H ...
- 阻止微信浏览器下拉滑动效果（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 可以更容易 ...
随机推荐
- March 10th, 2018 Week 10th Saturday
All good things must come to an end. 好景无常. Love is when the other person's happiness is more importa ...
- 编译&链接笔记
无法解析的外部符号? 1)库的版本不对,换成X64或Win32试试
- 《Java大学教程》—第15章 异常
自测题:1. 什么是异常?P357异常是在程序生命周期内出现的事件,它会导致程序行为不可靠. 2. 已检查异常和未检查异常的区别是什么?P359在编译器允许程序被编译通过前,要求程序员必须编写代 ...
- 【大数据技术】Sqoop
1.Sqoop是什么 Sqoop:SQL-to-Hadoop,传统数据库与Hadoop间数据同步工具.(MySQL.Oracle <==> HDFS.HBase.Hive) Sqoop ...
- ElasticSearch（一）：CentOS7 安装 ElasticSearch6.4.0
一.安装jre支持 在CentOS中安装ElasticSearch需要Java1.8.0,可执行命令# java -version查看当前系统所安装Java版本是否为1.8.0版本. 若非1.8.0 ...
- 真正的Maven经常使用命令
长期用Eclipse的Maven插件的小伙伴可能接触Maven的经常使用命令比較少.每次用每次翻文档. 假设让你脱离Eclipse怎么办,面试的时候考到了怎么办-- 假设你不想尴尬,请小朋友花点时间运 ...
- C#—ASP.NET:集成极光推送（Push API v3）
C#—ASP.NET:集成极光推送(Push API v3) 原文地址: https://blog.csdn.net/CXLLLK/article/details/86489994 1.极光推送官 ...
- Topshelf：一款非常好用的 Windows 服务开发框架 转发https://www.cnblogs.com/happyframework/p/3601995.html
背景 多数系统都会涉及到“后台服务”的开发,一般是为了调度一些自动执行的任务或从队列中消费一些消息,开发 windows service 有一点不爽的是:调试麻烦,当然你还需要知道 windows s ...
- Caused by: java.sql.SQLException: Value '0000-00-00 00:00:00' can not be represented as java.sql.Timestamp
错误信息如下: Caused by: java.sql.SQLException: Value '0000-00-00 00:00:00' can not be represented as java ...
- bzoj2721 [Violet5]樱花
bzoj2721 [Violet 5]樱花 给出 \(n\) 求 \(\frac{1}{x}+\frac{1}{y}=\frac{1}{n!}\) 的正整数解数量 \(\bmod (10^9+7)\) ...