完美解决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. spring boot-9.对springMVC的支持

    1.thymeleaf spring boot 推荐的模板引擎是thymeleaf.spring boot 的自动配置已经默认配置好了themleaf,只要导入themleaf的Starter就可以了 ...

  2. vmware中的虚拟linux配置多块网卡

    在使用vm上运行多个linux系统,来模拟LVS负载均衡实验中.需要在lvs服务器中设置两块网卡,发现可以在vm给虚拟机添加任意多个网卡. 方法: 不要启动Linux,在上面的菜单项中选择: “VM— ...

  3. SSH自动登录config文件配置

    title: SSH自动登录config文件配置 comments: false date: 2019-08-19 19:29:13 description: 更方便的 ssh 操作??? categ ...

  4. Android判断是debug还是release模式

    1.当有些功能不希望在release模式实现时,但是debug模式又需要的时候,就可以对当前版本模式进行判断.如是debug模式则日志输出级别设置为Level.DEBUG,release模式设置为Le ...

  5. 84. Largest Rectangle in Histogram (JAVA)

    Given n non-negative integers representing the histogram's bar height where the width of each bar is ...

  6. ConstantUtils

    public class ConstantUtils { public static final Integer PAGE_SIZE=2; public static final Integer NA ...

  7. Haproxy学习总结

    一.Haproxy介绍 1.实现了一种事件驱动,单一进程模型,支持数万计的并发连接,用于为tcp和http应用程序提供高可用,负载均衡和代理服务的解决方案,尤其适用于高负载且需要持久连接或7层处理机制 ...

  8. 用户吐槽不断：Android 10.0没法用

    如果你升级到Android Q第三个测试版的话,那么最近是不是被设备不断重启搞崩溃了,事实上也确实如此,因为有很多用户都遇到了类似的情况,大家吐槽谷歌的声音越来越大. 不少用户发现,自己设备升级至An ...

  9. DigitalOcean 推荐的ubuntu16下LAMP安装过程

    LAMP安装过程: How To Install Linux, Apache, MySQL, PHP (LAMP) stack on Ubuntu 16.04 (另一个参考例程:Ubuntu 16.0 ...

  10. Linux使用fsck修复文件系统

      1.fsck---file system check fsck 扫描文件系统时一定要在单用户模式.修复模式或把设备umount后进行.如果扫描运行中的系统,会造成系统文件损坏. RHEL6中fsc ...