完美解决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、微信浏览器下拉回弹效果。的更多相关文章

  1. 完美解决safari、微信浏览器下拉回弹效果

    CSS代码: .box{ overflow: auto; -webkit-overflow-scrolling: touch; } HTML代码: <body class="box&q ...

  2. 阻止微信浏览器下拉滑动效果（ios11.3 橡皮筋效果）

    在升级到 ios11.3 系统后,发现之前阻止页面滚动的代码e.preventDefault代码失效了.于是自己折腾了一番,找到了解决办法,分享给大家. 一.前言 浏览器在移动端有一个默认触摸滚动的效 ...

  3. js禁止微信浏览器下拉显示黑底查看网址，不影响内部Scroll

    开发项目跑在微信浏览器经常会遇到一个问题,微信浏览器下拉的时候会出现自带的黑色底色(显示网址)如下图: 网上好多js禁止操作的做法禁止了内部Scroll,导致页面不能滚动,上拉加载失效,例如这种做法: ...

  4. [转]js禁止微信浏览器下拉显示黑底查看网址，不影响内部Scroll

    原贴:https://www.cnblogs.com/jasonwang2y60/p/6848464.html 原贴:https://www.cnblogs.com/jasonwang2y60/p/6 ...

  5. js禁止微信浏览器下拉显示黑底查看网址

    // 首先禁止body document.body.ontouchmove = function (e) { e.preventDefault(); }; // 然后取得触摸点的坐标 var star ...

  6. 完美解决，浏览器下拉显示网址问题 | 完美解决，使用原生 scroll 写下拉刷新

    在 web 开发过程中我们经常遇到,不想让用户下拉看到我的地址,也有时候在 div 中没有惯性滚动,就此也出了 iScroll 这种关于滚动条的框架,但是就为了一个体验去使用一个框架好像又不值得,今天 ...

  7. 使用NestedScrollView+ViewPager+RecyclerView+SmartRefreshLayout打造酷炫下拉视差效果并解决各种滑动冲突

    使用NestedScrollView+ViewPager+RecyclerView+SmartRefreshLayout打造酷炫下拉视差效果并解决各种冲突 如果你还在为处理滑动冲突而发愁,那么你需要静 ...

  8. 微信小程序 - IOS 仿饿了么"我的",下拉橡皮筋效果

    这个需求是在wepy交流群里有群友提到的. 一个小花样. 注册mixins /** * IOS专用 顶部下拉橡皮筋效果 * 安卓的Page在到达顶部的时候,不能继续下拉...略过 * * 效果见 饿了 ...

  9. 推荐10个 CSS3 制作的创意下拉菜单效果

    下拉菜单是一个很常见的效果,在网站设计中被广泛使用.通过使用下拉菜单,设计者不仅可以在网站设计中营造出色的视觉吸引力,但也可以为网站提供了一个有效的导航方案.使用 HTML5 和 CSS3 可以更容易 ...

随机推荐

  1. Pikachu漏洞练习平台实验——XSS（二）

    概述 简介 XSS是一种发生在Web前端的漏洞,所以其危害的对象也主要是前端用户 XSS漏洞可以用来进行钓鱼攻击.前端js挖矿.盗取用户cookie,甚至对主机进行远程控制 攻击流程 假设存在漏洞的是 ...

  2. XOR on segment(线段树区间异或更新)

    原题传送门 本题大意:给定n个数字和m个操作,操作共有两种,第一种是求解区间l到r上元素的和,第二种是将区间l到r的元素都异或一个x,作为某个位置的新值. 很容易想到线段树维护区间和,但是我们发现,在 ...

  3. maven坐标Dependencies和Exclusions详解

    1.概念介绍 Dependencies:是可选依赖(Optional Dependencies) Exclusions:是依赖排除(Dependency Exclusions) 2.Dependenc ...

  4. [MtOI2019]永夜的报应 题解

    题面 题面说的乱糟糟的看起来似乎是个可持久化线性基: 然而~ 一个式子搞定一切: a^b<=a+b 那么把所有数异或起来便是答案: #include <bits/stdc++.h> ...

  5. 洛谷 P1273 有线电视网 题解

    题面 按照常见树形背包定义状态:设dp[u][j]表示在以u为根的子树中,选择j个客户所能获得的最大收益. 状态转移:dp[u][j]=max(dp[u][j-k],dp[v][k]-w(u,v)); ...

  6. Thymeleaf模板中变量报红

    在上顶部添加 <!--suppress ThymeleafVariablesResolveInspection --> 或者 <!--suppress ALL --> 都可以解 ...

  7. python中迭代器和生成器。

    前言:很多python教程中,对python的解释不容易理解,本文记录自己的理解和体会,是对迭代器和生成器的初步理解. 迭代器: 迭代器的实质是实现了next()方法的对象,常见的元组.列表.字典都是 ...

  8. unittest中的testCase执行顺序

    1.方法顺序 def setUp(self): 在测试方法前执行 def tearDown(self): 在测试方法后执行 class TestMethod(unittest.TestCase): # ...

  9. 9.jQuery之简洁版滑动下拉菜单

    知识点:hover的使用,已经slideToggle的切换效果 <style> * { margin: 0; padding: 0; } li { list-style-type: non ...

  10. linux相关命令大全......持续更新

    启动项目8080端口被占用,然而老久没玩Linux,命令忘光了,杀死进程都不记得了. 决定整理一波吧....... Linux: sudo强制执行,不在root用户下时使用. top 相当于windo ...