一些移动设备有缺省的touchmove行为,比如说经典的iOS overscroll效果,当滚动超出了内容的界限时就引发视图反弹

阻止滚动:

css:

body{
height:100%;
overflow-y:hidden;
}

js:

function bodyScroll(){
e.preventDefault();
}
document.addEventListener('touchmove', bodyScroll, false); //阻止
document.removeEventListener('touchmove', bodyScroll, false); //激活

阻止后激活要用同一函数

移动端阻止body滚动的更多相关文章

  1. ios端阻止页面滚动露底

    转自 http://www.eboy.me/archives/129: 在IOS端的微信中使用H5页面,页面滑动到底部时,再向上拉或页面在顶部时下拉,总会露出微信自带的底色:总是会让人不爽. 以下是一 ...

  2. 基于zepto的插件之移动端无缝向上滚动并上下触摸滑动

    该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 公司的移动端项目是基于zepto的,有一个页面要求文字能够无缝地不停向上滚动,但查了 ...

  3. 移动端web页面滚动不流畅,卡顿闪烁解决方案

    移动端web页面滚动不流畅,卡顿闪烁解决方案   1.ios端的-webkit-overflow-scrolling属性可控制页面滚动效果,设置如下实现惯性滚动和弹性效果: -webkit-overf ...

  4. 元素滚动到底部或顶部时阻止body滚动

    移动端的弹窗内容有滚动条,滚动到底部或顶部时或影响弹窗下的body滚动,某些浏览器滚动到顶部时不松手就触发了刷新页面的情况,如果不需要这样的默认体验,就需要加一下判断了. var startX,sta ...

  5. 弹出页面遮罩层,以及web端和移动端阻止遮罩层的滑动。

    最近项目遇到了遮罩层的一些问题,总结一下: 弹出遮罩层 遮罩层弹出有非常多的方法,这里只写出本人用的代码,使用jq操作dom的方法进行实现的. <style>.box{position:a ...

  6. ios移动端原生滚动条滚动不灵敏问题

    最近开发微信页面的时候遇到了这个问题, 因为移动端浏览器的原生滚动条样式很好,不像pc端那么难看,所以在页面需要滚动的地方用了原生的滚动条,这种滚动条在安卓浏览器中没有任何问题,但是在ios微信浏览器 ...

  7. 移动端的弹窗滚动禁止body滚动

    前言 最近一个需求是弹窗展示列表,显然是需要一个滚动条的,而滚动到底部就会穿透到body滚动,而阻止默认行为是不行的,这样两个都滑动不了 所以我在点击出现弹窗的时候在body加了以下css让它没有滚动 ...

  8. 移动端Web界面滚动touch事件

    解决办法一: elem.addEventListener( 'touchstart', fn, { passive: false } ); 解决办法二: * { touch-action: pan-y ...

  9. js - 移动端的超出滚动功能,附带滚动条,可解决弹层中滚动穿透问题。

    背景: 弹层里边有可滚动区域时,在移动端的坑我就不多说了. 找了很多解决滚动穿透的方案,最终都不能完美解决. 一气之下自己js撸了一个. 效果图: 原理: 1.解决滚动穿透:通过给弹层绑定touchm ...

随机推荐

  1. Android开发aidl使用中linkToDeath和unlinkToDeath的使用

    1.Binder死亡代理     这一节首先将介绍Binder类中比较重要的两个方法linkToDeath和unlinkToDeath.我们知道Binder是运行在服务进程,若服务端进程因为某种原因“ ...

  2. HTML5-电影影评网

    学习完了HTML5的新标签,然后结合之前的案例做了第一个小案例.自我感觉良好.下面我来展示一下图片 这是我浏览其他网站的时候以为发现的新功能可以运行代码,这是运行之后截得图片.自我感觉照片还是蛮高大上 ...

  3. 解读AppIcon图标设置置信息和App内存警告临界值

    前面有同学问到了iOS内存警告临界值和工程项目里AppIcon的一些配置信息,相信对刚入行的同学来说,可能都会碰到类似的问题,记录一下供后来者查询. 1.先简单说下AppIcon的图标的配置信息 1) ...

  4. zend studio 快捷键

    复制当前行:ctrl+alt+↓ 删除当前行:Ctrl+d 行注释:Ctrl+/ 快注释(先选中要注释的代码):Ctrl+shift+/ 提示助手(方便函数等补全):alt+/ 代码格式化:Ctrl+ ...

  5. OpenSceneGraph 编译 error LNK2019:unresolved external symbol 错误

    在编译 OpenSceneGraph 的一个简单示例时, #include <osgViewer/Viewer> #include <osgDB/ReadFile> void ...

  6. word 2010 建立多级结构和目录

    点击“开始”中的“样式”中右下角按钮   点击弹出窗口中最下方第三个按钮   点击“推荐”选项卡,再选择要显示的标题,然后点击“显示”.然后按照需要,分别把“标题3”“标题4”等显示.最后点确定即可. ...

  7. Hibernate 系列 06 - 对象在JVM中的生命周期

    引导目录: Hibernate 系列教程 目录 Java对象通过new命令进行创建,Java虚拟机(Java Virtual Machine,JVM)会为新的Java对象在内存中开辟一个新空间以存放次 ...

  8. 安卓APP与智能硬件相结合的简易方案

    第1章 概  述 (作者小波QQ463431476) (来源http://blog.chinaaet.com/zhaocundang/p/5100017645博客) (来源   http://www. ...

  9. 排序算法----基数排序(RadixSort(L,max))单链表版本

    转载http://blog.csdn.net/Shayabean_/article/details/44885917博客 先说说基数排序的思想: 基数排序是非比较型的排序算法,其原理是将整数按位数切割 ...

  10. html基础起航

    废话不多说,直接上例子! 工欲善其事,必先利其器 浏览器要有吧~                       比如:IE.Chrome.Firefox…… 纯文本编辑软件不可少~          比 ...