完美解决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. C语言Ⅰ作业12—学期总结

    一.我学到的内容 二.我的收获 作业链接 收获 C语言Ⅰ博客作业01 认识了PTA编程,博客园,Markdown基本语法1,Markdown基本语法2 C语言Ⅰ博客作业02 PTA系统常见问题解答 C ...

  2. Linux下路由配置梳理(转)

    转自:https://www.cnblogs.com/kevingrace/p/6490627.html 在日常运维作业中,经常会碰到路由表的操作.下面就linux运维中的路由操作做一梳理:----- ...

  3. Luogu P2501 [HAOI2006]数字序列

    题目 首先把\(a\)改成严格单调上升等于把\(a_i-i\)改成单调不降. 那么第一问可以直接做LIS,答案就是\(n-\)LIS的长度. 同时我们记录一下序列中每个位置结尾的LIS长度. 第二问我 ...

  4. hashlib模块和hmac模块

    hashlib模块和hmac模块 hashlib模块 一.导入方式 import hashlib 二.作用 无论你丢什么字符串,他都会返回一串 固定长度的字符串 三.模块功能 3.1 经常使用 imp ...

  5. Elasticsearch入门教程(四)：Elasticsearch文档CURD

    原文:Elasticsearch入门教程(四):Elasticsearch文档CURD 版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接: ...

  6. oracle常用函数（2）

    1) trunc函数,用于截断数字, 截断数字,用法为:trunc(n1,n2),n1表示要被截断的数字,n2表示要截断到那位,但是不会进行四舍五入. n2还可以表示负数,表示截断到小数点前,意思就是 ...

  7. 深入理解java虚拟机(4)类加载的过程

    类加载的过程 ------------------------------------------------------- 0.如下图所示JVM类加载机制分为5个部分:加载.验证.准备.解析.初始化 ...

  8. redis 模拟redis server接收信息

    一.实现说明 客户端使用jedis正常set值到redis服务器   2. 模拟服务器接收jedis发送的信息 二.jedis客户端代码 package com.ahd.redis; import r ...

  9. IDEA设置类头,方法头自定义内容~图文

    1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1

  10. windows挂载nfs

    注意:Win10 Creators Update前只有Win10企业版可以挂载NFS, Creators Update后专业版也可挂载NFS了. 安装 按Win+R输入OptionalFeatures ...