完美解决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. junction 文件夹做连接到别的分区

    加载连接 C:\>junction "C:\Docume~1\Admini~1\LocalS~1\Applic~1\360Chr~1\Chrome\UserDa~1\Default&q ...

  2. 20191209 Linux就该这么学（4）

    4. Vim编辑器与Shell命令脚本 Vim 编辑器中设置了三种模式-命令模式.末行模式和编辑模式. 命令模式:控制光标移动,可对文本进行复制.粘贴.删除和查找等工作. 输入模式:正常的文本录入. ...

  3. 函数进阶装B操作

    三元表达式 条件成立时的返回值 if 条件 else 条件不成立时的返回值 x = 10 y = 20 print(f"x if x > y else y: {x if x > ...

  4. shell with hadoop

    shell 命令操作 hadoop 之前多少提及过,这里做个总结. shell with hdfs 基本命令 bin/hadoop fs 大于下面的命令 bin/hdfs dfs dfs 是 fs 的 ...

  5. sqlalchemy query函数可用参数有哪些？

    一.模型名 二.模型对象属性 三.聚合函数 下面就分别为大家讲讲query函数这三种参数的用法. 在讲之前,我已经把数据库连接配置.模型,以及添加数据写好了,代码如下: from sqlalchemy ...

  6. Android 调用摄像头功能【拍照与视频】

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/ma_hoking/article/details/28292973 应用场景: 在Android开发 ...

  7. [.net core]7 4种app key value的配置方法及优先顺序

    就是这货 点开查看内容 { "Logging": { "LogLevel": { "Default": "Warning" ...

  8. C++ bool、三目运算符、引用

    bool变量: C++相对于C语言加入了bool变量,其值为true(1) 和 false(0).true表示不为零的数  false表示为零的数,占用一个字节的空间. 代码: /* 编译环境  gc ...

  9. 使用python 实现 微信好友 个性签名 并 制作 词云图

    环境搭建: pip install itchat numpy wordcloud matplotlib jieba 先把上面的几个包安装完成,直接上代码 import itchat from itch ...

  10. vue的v-model指令原理分析

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...