完美解决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 可以更容易 ...
随机推荐
- Linux常用命令-解压缩篇
前言 Linux常用命令中,有很多用于对文件的压缩或解压,本文将介绍这些解压缩命令中不常见却非常实用的用法. tar tar是linux中最常用的解压缩命令.tar命令可用于处理后缀名为tar,tar ...
- C#基础の迭代器详解
一.什么是迭代器 迭代器(iterator)有时又称游标(cursor)是程序设计的软件设计模式,可在容器(container,例如链表或阵列)上遍访的接口,设计人员无需关心容器的内容. 迭代器模式是 ...
- Android面试题目整理与解说（二）
版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/bz419927089/article/details/31386787 1.Dalvik和标准Jav ...
- centos7下安装docker（20.docker swarm start）
从主机的层面来看,docker swarm管理的是docker host集群. 什么是集群? 服务器集群由一组网络上相互连接的服务器组成,他们一起协同工作. 一个集群和一堆服务器的显著区别是: 集 ...
- 《JAVA程序设计》_第一周学习总结
20175217吴一凡 <java程序设计> 第一周学习总结 虽然已经做好了心理准备,但第一周的学习任务着实让我忙了整整三天,还是挺充实的吧.寒假已经在自己的电脑上安装好了虚拟机,我就在我 ...
- 12 python 初学（深浅拷贝、集合）
深浅拷贝:参考:http://www.cnblogs.com/yuanchenqi/articles/5782764.html s = [[1, 2], 'lily', 'hello'] s2 = s ...
- MyEclipse使用总结——设置MyEclipse开发项目时使用的JDK
安装好MyEclipse之后,在MyEclipse中开发项目时,默认使用的是MyEclipse是自带的JDK,如下图所示: 如果我们需要使用自己安装好的JDK,那么就需要在MyEclipse中重新设置 ...
- SimpleDialogBox
import 'package:flutter/material.dart';import 'dart:ui';import 'dart:async';enum Option{A,B,C}void m ...
- spingMVC异步上传文件
框架是个强大的东西,一般你能想到的,框架都会帮你做了,然后只需要会用就行了,spingmvc中有处理异步请求的机制,而且跟一般处理请求的方法差别不大,只是多了一个注解:spingmvc也可以将stri ...
- Linux进程管理 (9)实时调度类分析，以及FIFO和RR对比实验
关键词:rt_sched_class.SCHED_FIFO.SCHED_RR.sched_setscheduler().sched_setaffinity().RR_TIMESLICE. 本文主要关注 ...