阻止页面滚动事件

最新推荐文章于 2024-07-11 11:29:15 发布
原创 最新推荐文章于 2024-07-11 11:29:15 发布 · 3k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了一种使用 jQuery 在触摸屏设备上禁用页面滚动的方法，并提供了如何重新启用滚动的示例。

    //阻止整个页面滚动事件

    $("body").on("touchmove",function(event){

        event.preventDefault;
    }, false);
    //然后点击取消或者确定时再取消body上的绑定
    $("body").off("touchmove");
页面滑动长弹窗，如何阻止页面滚动？
卡卡西：一个擅长拷贝的前端程序员
06-01 1668
当页面弹层内容过长(如规则弹窗)，手动滑动时，经常是滚动页面内容，而非弹层内容，这种情况的用户交互不是太友好。 解决办法： 当弹出弹层时，手动将页面定住，禁止滚动。 首先想到的就是 “fixed”： function stopMove() { // 滑动长弹窗时，阻止背景跟随滑动 var top = -$(window).scrollTop(); $('body').css({ 'position': 'fixed' }) setTimeou
#再读DOM# （1）DOM 事件模型
qq_40029828的博客
10-04 306
- 概念 事件：事件是用户或者浏览器自己执行的某种动作，是文档或者浏览器发生的一些交互瞬间 事件流：当一个事件被触发时，一个event对象将被创建并顺序的传递给事件监听者们。事件传递的顺序称为事件流。 事件处理程序：响应事件的函数。如click是事件名称，加上"on"开头，事件处理程序是onclick 事件在子元素和父元素之间的传播分为3个阶段：（1）捕获阶段：事件从window对象自上而下向目标节点传播的阶段；（2）目标阶段：真正的目标节点正在处理事件的阶段；（3）冒泡阶段：事件从目标节点自下而上向win
JS阻止浏览器滚动事件
Mr_Yan的博客
05-28 1万+
在前几天的项目中，场景值如下： 1.动态生成列表，列表高度不固定 2.外面父元素的属性设置为overflow:auto; 3.鼠标移动到列—li中的a上,出现选择列表，鼠标在列表上，列表不消失 4.当鼠标放置到出现的列表上时，再滚动滑轮，因为出现的列表为是根据标签a的位置来进行定位的，所以滚动的时a页面在滚动，但列表位置虽然没变，但与原来a标签相符合的位置却变了 因为父元素ov...
移动设备禁止h5页面滚动
程序员_R的专栏
10-22 9330
document.body.addEventListener('touchmove', function (event) { event.preventDefault(); }, false);
阻止滚动条事件冒泡
10-16
阻止滚动条事件mousewheel冒泡,当网页内部元素滚动条到顶或底时不触发浏览器窗口的滚动条事件。
阻止滚动事件【转】
{玖}单纯着，幸福着，思考着
07-22 122
http://jsbin.com/disable-scrolling/1/  
禁止页面滚动的几种方法
文摘资讯
05-25 2260
overflow:hidden您可以使用 CSS 的 overflow:hidden 属性来防止页面在弹出浮层时滚动。具体来说，可以通过以下步骤实现：在HTML的 标签上添加一个类名，例如 no-scroll。使用 CSS 将该类名与 overflow:hidden 属性关联，这将防止页面滚动，同时也会隐藏滚动条，例如：.no-scroll { overflow: hidden; }当弹出浮层...
关于鼠标滚轮事件的禁止方法
weixin_33711641的博客
10-20 990
当鼠标或者键盘触发某一事件时，在JavaScript中，我们可以为这个事件设置相应的动作。当然浏览器本身甚至是操作系统也会有对某一事件的默认动作，这样除了由于我们设置了自己定义句柄而产生的动作之外，还会有默认的动作发生。 通过事件属性取消默认动作 DOM的Event对象，通过其preventDefault()方法来取消默认动作。在IE下，...
知识点：阻止scroll事件
(づ｡◕‿‿◕｡)づgigi奋斗在前端和刷题中╮(╯﹏╰)╭
08-23 1万+
面试的时候被问道怎么取消一个事件的默认行为，当然是用event.preventDefault()了。 但是怎么屏蔽页面的滚动？这里event.preventDefault()不起作用，原因就是scroll事件属于UI事件，而UI事件一般是不能够取消默认行为的。UI事件包括： load、unload abort error select resize scroll 为这类事件绑定事件处理函数，只会在
手机端阻止页面滑动
liudanyang_21的博客
08-27 381
之前开发了一个手机端页面，里面有个提交表单，操作表单时会有对应的遮罩层提示，而这个遮罩层正是常见的那种盖着全屏黑色半透明的。 问题出现于，当页面高度过长出现滚动条时，这时如果操作表单出现遮罩层，手指在点击屏幕难免会有些滑动动作，这时候页面会或上或下的滚动，这时属于正常现象。 但是页面就偏移了当前的位置，有点不利于用户体验，如果遮罩关闭时页面跑上跑下了，再回到表单位置时，还要在重新滑动页面到达所要的位置，很不利于用户体验。 js有很多种事件可以阻止滚动条的滚动，本篇文章为了实现起来更简单就发现了CSS的实现方
js得禁止页面滚动
xiaohua0708day的博客
01-20 1228
在web页面中，经常遇到一些弹窗内部有滚动条，可以滚动，弹窗后面的文档流也可以滚动，两个滚动区域会相互影响，用户体验不太好。1、弹出弹窗，禁止滚动，并停留在当前位置。2、关闭弹窗，恢复滚动，并恢复在停留位置。方案一、封装禁止、允许滚动方法。
前端页面弹框遮罩禁止页面滚动
热门推荐
大菜鸟的博客
07-03 6万+
前端页面弹框遮罩禁止页面滚动前端开发经常会遇到的一个问题就是制作一个弹框来向用户提示信息，在这个弹框弹出的同时，往往会伴有一个灰色的遮罩层挡住页面内容，同时整个页面被这层遮罩盖住，不可点击也不可滚动。 要制作这个效果在PC端非常简单，只需要设置html的高度为100%占满屏幕，并且将html的overflow设置为hidden，即可保证页面不可滚动。 但是同样的问题在移动端情况就有所区别。仅
js禁止移动端浏览器滚动事件以及取消（允许）还原浏览器滚动事件
iceking66的博客
10-17 8241
1、禁止浏览器滚动 document.addEventListener('touchmove', function (event) { event.preventDefault(); }, false); document.addEventListener('touchmove', function (event) { window.event.returnVa
阻止浏览器滚动，阻止滚动传递
CZDBGSY的博客
07-11 284
使用overflow会导致滚动条消失，即使添加填充也会导致页面重排。
js阻止滚动事件多次执行
m0_51525349的博客
03-09 1699
js阻止滚动事件多次执行 当我们写滚轮事件时，有时没有达到自己想要的效果，其中可能就是因为滚轮在滚动时，多次执行了滚动事件，看下面代码。 window.onscroll=function(){ console.log(123) } 上面滚动了一次，结果输出了多个123，说明了滚动事件被多次执行了，想要解决这个问题，就给滚轮事件添加一个状态就好了 //设置滚轮事件的状态 var state = true; function changestate()
js禁止页面滚动
不求甚解的博客
03-03 1万+
在web页面中，经常遇到一些弹窗内部有滚动条，可以滚动，弹窗后面的文档流也可以滚动，两个滚动区域会相互影响，用户体验不太好。 1、弹出弹窗，禁止滚动 const disableScroll = (domId) => { var scrollTopVal = document.documentElement.scrollTop || document.body.scrollTop; // 禁止滑动 const selectdom = domId || 'app'; document
js 静止滚轮_javascript实现禁止鼠标滚轮事件
weixin_39719018的博客
12-19 496
平时我们兼容什么东西总是在调整低版本IE的兼容性，但是这回不是因为低版本浏览器不给力。而是因为火狐给力过头了，完全不顾其它浏览器的感受标新立异了。除了火狐之外，所有的浏览器都可以使用MouseWheel事件来处理鼠标滚轮的响应。但是火狐却偏偏不支持MouseWheel，而使用无厘头的DOMMouseScroll，这玩意儿除了火狐以外其它浏览器都不兼容。也就是说，对于鼠标滚轮事件的处理，火狐只能使用...
如何禁止页面滚动事件
susanzxl的专栏
05-11 2546
document.documentElement.style.overflow='hidden';//即：设置html元素的overflow属性hidden   document.body.style.overflow='hidden'//移动端的可以这样设置  这样设置之后，页面上的滚动条就消失了，页面就无法滚动了！
JS禁用鼠标滚轮事件
jumtre的专栏
04-11 1万+
接到一个需求，要在flash里面使用鼠标滚轮控制壁纸地板的替换，这本身是一个小需求，但是在网页测试中发现滚动鼠标滚轮时，网页也会跟着滚动，这样鼠标就没法固定在滚动元件的上面，对用户体验造成了不良影响。 然后开始尝试阻止鼠标滚轮影响页面，先试用这段代码： function disabledMouseWheel() { if (document.addEventListen
浏览器移除页面滚动事件
最新发布
11-23
浏览器移除页面滚动事件通常是为了实现某些特定的需求，比如在弹出层、模态框或者固定元素上禁用默认的滚动功能。在JavaScript中，你可以通过阻止`scroll`事件的冒泡或默认行为来达到这个目的。以下是两种常见的方法...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值