原生js禁止页面滚动

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

原生js禁止页面滚动的相关文章

js禁止页面滚动

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

js原生 + jQuery实现页面滚动字幕

js原生/jQuery实现页面滚动字幕效果 17:45:49 在新闻列表或者文章列表信息等页面中很容易要求实现字幕滚动的效果,以下为简单的实现页面中滚动字幕的效果 1.jQuery实现页面滚动字幕效果 代码如下: <div class="box"> <ul class="list"> <li>这是滚动加载的第1条数据</li> <li>你猜猜这是第几条滚动加载的文字</li> <li>

微信小程序实现(禁止页面滚动、长按复制)

1. 禁止页面滚动对于小程序某些一屏的页面,特别是全屏的swiper,并不希望页面在竖直方向上可以滚动. 实现方式:在需要禁止滚动页面的json中加入: "disableScroll": true 1 注意:只在页面配置中有效,无法再app.json中设置该项 参考:https://developers.weixin.qq.com/miniprogram/dev/framework/config.html#页面配置 2. 长按复制 <text class='copy_conten

关于禁止页面滚动的实践(禁止滚轮事件)

禁止网页页面滚动只需要给document添加onmousewheel事件,然后在事件绑定函数当中设置e.preventDefault()就可以了,没错,就是芥末简单. 可是问题又来了,首先,onmousewheel是什么事件呢?它又有什么兼容性上的问题呢? 带着以上的两个问题,我通过查阅资料并且通过实践,得到了一下的认识. 1.onmousewheel是页面滚动事件,与onscroll不同的是,一般我们是通过onscroll来获取页面的滚动高度,然后添加相应的高度. 而onmousewheel,

velocity.js实现页面滚动切换效果

在线演示1 在线演示2 在线演示3 在线演示4 在线演示5 本地下载 原文链接:http://www.gbtags.com/gb/share/5650.htm 页面滚动切换效果 今天介绍一个Javascript的小型的动画插件velocity.js,可以方便高效的开发一个具有多页面滚动切换效果的网站. 浏览器支持 velocity.js支持IE8+.Chrome.Firefox等浏览器,并支持Andriod以及IOS. 我们开发一个工程,里面有一组相关联系的大型页面.不能做到在一张页面中把它们展

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

禁止页面滑动 通常静止滑动方案:(阻止滑动事件) window.ontouchmove=function(e){ e.preventDefault && e.preventDefault(); e.returnValue=false; e.stopPropagation && e.stopPropagation(); return false; }; 有部分机型不支持以上静止滑动方案,可使用:(点击后页面浮动到指定位置不动 将body的position设置为fixed) $

vue页面有弹层,禁止页面滚动

1 var preD = function (e) { 2 e.preventDefault() 3 } 4 export default { 5 data () { 6 return { 7 popupStatus: false 8 } 9 }, 10 watch: { // 监听data中弹层状态 11 popupStatus (val) { 12 if (val) { 13 document.body.style.overflow = 'hidden' 14 document.addEve

弹出层完美禁止页面滚动

页面中经常会遇到弹出层的部件,当弹出层激活时覆盖整个页面,且背景部分不能滚动.实现起来有以下要点: 弹出层position设置为fixed,四个定位锚点均设为0: 激活弹出层时给html和body设置overflow: hidden;: 以下是实践: codepen 为了让彻底禁止滚动,还可以在mousewheel和touchmove事件(分别对应PC和移动端)中调用preventDefault()方法: function forbidScroll(e) { e.preventDefault &

jquery 禁止页面滚动-移动端

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