【移动端】js禁止页面滑动与允许滑动

禁止页面滑动

通常静止滑动方案:(阻止滑动事件)

window.ontouchmove=function(e){
    e.preventDefault && e.preventDefault();
    e.returnValue=false;
    e.stopPropagation && e.stopPropagation();
    return false;
};

有部分机型不支持以上静止滑动方案,可使用:(点击后页面浮动到指定位置不动 将body的position设置为fixed)

$("#btn").click(function(){
    var top=$(window).scrollTop();//这是当前滚动的页面滚动条位置
    $("body").css({
        "position":"fixed",
        "width":"100%",
        "top":top*-1 //此处为当前需要定住的位置
    });
});

允许页面滑动:

通常允许滑动方案:(清空滑动事件即可)

window.ontouchmove="";

处理部分机型禁止滑动的允许滑动:(将body的position设置为static)

$("#btn2").click(function(){
    $("body").css({
        "position":"static"
    });
});

原文地址:https://www.cnblogs.com/wuhairui/p/9211007.html

时间: 2024-10-12 05:12:59

【移动端】js禁止页面滑动与允许滑动的相关文章

原生js禁止页面滚动

// 开启.禁止页面滚动 bodyScroll: { e(e) { e.preventDefault();// 注意此处代码片段必须这样提出来已保证传入下边两个事件的处理程序一样才生效,分别写到事件处理程序中不生效. }, // 开启滚动 open() { document.body.removeEventListener('touchmove', this.e, false); }, // 禁止滚动 close() { document.body.addEventListener('touch

js禁止页面滚动

开发移动端页面的时候有一个很比较常见的需求,在出现弹窗时,禁止滑动弹窗后面的主体页面.如何实现呢,往下看 js实现整个页面禁止滚动: document.body.addEventListener('touchmove', function(e){ e.preventDefault(); }, { passive: false }); //passive 参数不能省略,用来兼容ios和android passive是干吗用的呢,设置该属性的目的主要是为了在阻止事件默认行为导致的卡顿.等待监听器的执

inobounce.js : 禁止IOS H5的滑动回弹

IOS的移动端/H5/webapp 页面如果滚动到底部或者在页面顶部再往上拉,都会出现一个回弹的效果. 想取消这个效果可以引入一个简单的库就行,不用再写繁琐的样式. github地址 直接引入就行 <script src="inobounce.js"></script> 例子: 因为这个库是禁止了整个页面的滑动,所以如果页面中有其他元素需要滑动的,要给滑动元素设置一个height或max-height,还有overflow: auto; -webkit-over

移动端H5单页面跟随手指滑动切换组件PageSlider

转载地址:http://www.ifrans.cn/pageslider/?replytocom=38914 PageSlider PageSlider 是一个基于zepto.js用于实现H5单页面跟随手指上下滑动切换的组件,支持通过transform3D启动GPU加速,目前仅支持移动端touch设备. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name=&

js禁止浏览器页面后退功能

js禁止浏览器页面后退功能: <script> $(function(){ if(window.location.href.indexOf("/login") > -1) { //防止页面后退 history.pushState(null, null, document.URL); window.addEventListener('popstate', function () { history.pushState(null, null, document.URL);

H5禁止页面滑动/滚动

禁止页面滚动--完美解决方案,滚动条显示与否,手持设备兼容与否 禁止页面滚动 有三种方法 1,依靠css 将页面 document.documentElement.style.overflow='hidden'; document.body.style.overflow='hidden';//手机版设置这个. 如果设置了如上,页面的滚动条将会消失,此时鼠标滚轮失效. 但是 你用键盘的 上下左右键,你会发现,页面仍然可以滚动. 别着急 往下看 2,在 1 的基础上 添加 js功能 var move

jquery 禁止页面滚动-移动端

禁止 window.ontouchmove=function(e){        e.preventDefault && e.preventDefault();        e.returnValue=false;        e.stopPropagation && e.stopPropagation();        return false;} 取消禁止 window.ontouchmove=function(e){        e.preventDefau

禁止页面被复制和禁止右键,一段样式一段JS就行了,无需复杂设定!

群里小伙伴经常问怎么禁止页面复制和右键,其实这个问题百度一下是很多资料的,我估计小伙伴都懒,所以这里统一回复下: 找到模板里面的</head>,在上面加如下代码就行了 <style type="text/css">  body {      -webkit-touch-callout: none;      -webkit-user-select: none;      -khtml-user-select: none;      -moz-user-selec

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

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