首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

js禁止屏幕滚动

在JavaScript中禁止屏幕滚动可以通过多种方式实现,以下是一些常见的方法:

1. 使用CSS样式

可以通过设置overflow属性来禁止滚动:

代码语言:txt
复制
body {
    overflow: hidden;
}

或者在JavaScript中动态添加这个样式:

代码语言:txt
复制
document.body.style.overflow = 'hidden';

2. 阻止触摸事件

在移动设备上,可以通过监听触摸事件并阻止默认行为来禁止滚动:

代码语言:txt
复制
document.addEventListener('touchmove', (event) => {
    event.preventDefault();
}, { passive: false });

3. 阻止鼠标滚轮事件

可以通过监听鼠标滚轮事件并阻止默认行为来禁止滚动:

代码语言:txt
复制
window.addEventListener('wheel', (event) => {
    event.preventDefault();
}, { passive: false });

4. 禁止键盘滚动

可以通过监听键盘事件并阻止默认行为来禁止滚动:

代码语言:txt
复制
document.addEventListener('keydown', (event) => {
    if (event.key === 'ArrowUp' || event.key === 'ArrowDown' || 
        event.key === 'PageUp' || event.key === 'PageDown' || 
        event.key === 'Space') {
        event.preventDefault();
    }
});

应用场景

  • 模态框或弹窗:当弹出模态框或弹窗时,通常需要禁止背景页面的滚动。
  • 全屏应用:在全屏应用或游戏中,可能需要禁止用户通过滚动来退出全屏模式。
  • 特定交互:在一些特定的交互场景中,如拖拽操作,可能需要禁止滚动以避免干扰。

注意事项

  • 用户体验:禁止滚动可能会影响用户体验,因此应该谨慎使用,并确保有明确的恢复滚动的方法。
  • 可访问性:确保禁止滚动不会影响到使用辅助技术的用户,如屏幕阅读器用户。

恢复滚动

如果需要在某个时刻恢复滚动,可以移除之前添加的样式或事件监听器:

代码语言:txt
复制
// 移除CSS样式
document.body.style.overflow = '';

// 移除触摸事件监听器
document.removeEventListener('touchmove', preventDefaultHandler);

// 移除鼠标滚轮事件监听器
window.removeEventListener('wheel', preventDefaultHandler);

// 移除键盘事件监听器
document.removeEventListener('keydown', preventDefaultHandler);

其中preventDefaultHandler是之前添加的事件监听器的引用。

通过上述方法,可以在JavaScript中有效地禁止屏幕滚动,并在需要时恢复滚动。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

  • 蒙层禁止页面滚动的方案

    蒙层禁止页面滚动的方案 弹窗是一种常见的交互方式,而蒙层是弹窗必不可少的元素,用于隔断页面与弹窗区块,暂时阻断页面的交互。...当弹出蒙层时禁止蒙层下的页面滚动,也可以称为滚动穿透的问题,文中介绍了一些常用的解决方案。...charset="utf-8"> 蒙层禁止页面滚动的方案...所以如果在蒙层内部有元素需要滚动的话,需要用Js控制其逻辑,但是逻辑控制起来又是比较复杂的,我们可以判断事件的event.target元素,如果touch的目标是弹窗不可滚动区域即背景蒙层就禁掉默认事件...,反之就不做控制,之后又出现了问题,需要判断滚动到顶部和滚动到底部的时候禁止滚动,否则触碰到上下两端,弹窗可滚动区域的滚动条到了顶部或者底部,依旧穿透到body,使得body跟随弹窗滚动,这样的话逻辑的复杂程度就比较高了

    6.4K21

    JS简易整页滚动

    fullPage超简易版本 1.知识点 JS 滚动监听事件 JS 移动端touch监听事件 函数节流 DOM操作 2.示例GIF ?...CSS html, body设置 overflow 为 hidden, 让视图中只包括一个分页;设置滑动分页的长宽都是 100%; 外部容器设置 transition 过渡效果, 并设置为相对定位, 滚动是修改外部容器的...Top 值, 实现滚动效果. html, body { padding: 0; margin: 0; overflow: hidden; } .page-container { position...向下滚动时, 当 currentPosition 比 -整体分页高度 大的时候(绝对值相比小的时候), 向下滚动;向上滚动时, 当 currentPosition 大于 0 的时候, 向上滚动. /...滚动事件firefox与其他浏览器的事件不同, 所以需要进行判断. deltaY大于0的时候, 想下滚动; 反之, 向上滚动. var handlerWheel = throttle(scrollMove

    15.7K31

    JS判断滚动条是否停止滚动

    背景:昨天一个同事有种需求,有一个展示数据区域的div,带滚动条,当滚动条滚动时,需要向后台发请求,计算数据,再拿到前台展示。        ...分析:由于数据量级别较大,所以当滚动条滚动时,如果时时向后台发请求,对服务器和浏览器都造成巨大的压力。想到的解决方案是,当滚动条停止时,再去发请求计算数据。...那么问题来了,如何判断滚动条是否停止了呢?        解决:搜索了一下,js本身是无法判断滚动条是在滚动状态还是停止状态,只有通过其它方式了。...后来想到的思路是当滚动条滚动的时候,发起一个定期执行的方法,并记录一次当前滚动条到顶部的距离,这个方法中判断此时滚动条到顶部的距离是否和上次记录的相等,如果相等,那么说明停止滚动了,不相等,还在滚动。...-- // 让浏览器出现滚动条 for(var i = 0; i < 100; i++) { document.write(""); } var topValue = 0,//

    17.4K00

    屏幕宽高不够,滚动视图ScrollView来凑

    一、ScrollView概述 从前面的学习有的同学可能已经发现,当拥有很多内容时屏幕显示不完,显示不全的部分完全看不见。但是在实际项目里面,很多内容都不止一个屏幕宽度或高度,那怎么办呢?...在默认情况下,ScrollView只是为其他组件添加垂直滚动条,如果应用需要添加水平滚动条,则可借助于另一个滚动视图HorizontalScrollView来实现。...ScrollView与HorizontalScrollView的功能基本相似,只是前者添加垂直滚动条,后者添加水平滚动条。...android:scrollbarTrackVertical:设置垂直滚动条背景(轨迹)的drawable。 android:scrollbars:设置滚动条显示。...arrowScroll (int direction):响应点击上下箭头时对滚动条滚动的处理。 fling (int velocityY):滚动视图的滑动(fling)手势。

    3.1K60
    领券