js禁止滚动条滚动,并且滚动条不消失,页面大小不变

本文介绍了一种禁用网页滚动条的方法,并提供了相应的JavaScript代码实现。通过使用这些代码,可以固定滚动条位置或者完全隐藏滚动条,适用于特定场景下的用户体验优化。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

//禁止滚动条滚动
function unScroll() {
    var top = $(document).scrollTop();
    $(document).on('scroll.unable',function (e) {
        $(document).scrollTop(top);
    })
}

  


//移除禁止滚动条滚动
function removeUnScroll() {
    $(document).unbind("scroll.unable");
}

  

$('body').css('overflow','hidden');页面滚动条消失,页面大小会变

个人博客 :很多好用的 npm 包 , 可以看看  https://gilea.cn/ 

 

github:  https://github.com/longfei59418888/vui   (很不错的vue2.0组件库,记得给一个 start,以后有一起讨论,各种好组件)

<think>嗯,用户的问题是关于如何用JavaScript实现禁止页面滚动但保留滚动条可见的方法。我需要先理解他们的具体需求。用户可能遇到这样的情况,比如弹出模态框时,希望背景页面滚动,但滚动条仍然存在,避免页面布局跳动。 首先,我应该回忆一下常见的处理滚动的方法。通常,禁止滚动可以通过设置`overflow: hidden`到body元素,但这会隐藏滚动条,导致页面内容偏移,可能符合用户需求。用户希望保留滚动条可见,所以能直接使用这种方法。 接下来,我需要思考如何在隐藏滚动条的情况下阻止滚动。可能的思路包括阻止默认的滚动事件,或者动态调整滚动位置。记得之前遇到过类似的问题,可以通过监听`wheel`和`touchmove`事件,并调用`preventDefault()`来阻止滚动行为。同时,保持`overflow: auto`或`scroll`样式,这样滚动条仍然显示。 另外,还要考虑兼容性问题。移动端的触摸事件和PC端的滚轮事件都需要处理。同时,动态设置`position: fixed`并记录当前的滚动位置,这样在禁止滚动页面会跳动,滚动条的位置也保持不变过这样做可能会影响布局,尤其是当有固定定位的元素时,需要进一步调整。 然后,我需要参考用户提供的引用内容。引用[1]提到`DOMContentLoaded`事件,但这里可能直接相关。引用[3]提到了使用CSS的`calc()`函数,但用户的问题是关于JavaScript的,所以可能太相关。过,引用[3]中关于滚动条的处理可能有帮助,比如如何调整样式。 还需要考虑代码的示例。应该提供一个简单的函数,当调用时禁止滚动,再次调用时恢复。比如,使用一个变量来跟踪状态,添加或移除事件监听器,以及调整样式。 另外,测试浏览器下的行为也很重要。例如,在禁止滚动后,确保滚动条仍然可见,并且页面没有发生布局变化。可能需要通过设置`body`的`position`为`fixed`,并设置`top`为当前的滚动偏移,这样页面内容会跳动,滚动条保持原位。 总结一下步骤: 1. 阻止默认的滚动事件(wheel和touchmove)。 2. 保持滚动条可见,可能需要保持body的overflow为auto。 3. 防止页面内容跳动,使用position: fixed和记录滚动位置。 然后编写JavaScript代码,实现这些步骤。同时,提供恢复滚动的方法,移除事件监听器并还原样式。 最后,检查是否有遗漏的情况,比如键盘的滚动事件(比如方向键或空格键),是否需要也阻止这些事件的默认行为。过这可能比较复杂,用户可能只需要基本的解决方案。 现在,整理这些思路,形成步骤清晰的回答,并提供代码示例和注意事项。</think>### JavaScript禁止页面滚动但保留滚动条可见的实现方法 #### 核心原理 通过JavaScript控制滚动事件默认行为,同时保持滚动条可见状态。需要处理PC端鼠标滚轮事件和移动端触摸滑动事件[^3]。 #### 实现步骤 1. **事件阻止** ```javascript function preventScroll(e) { e.preventDefault(); } // 添加事件监听 document.addEventListener('wheel', preventScroll, { passive: false }); document.addEventListener('touchmove', preventScroll, { passive: false }); ``` 2. **滚动条保留** ```css body { overflow: auto !important; position: fixed; width: 100%; } ``` 3. **完整函数封装** ```javascript let isLocked = false; let scrollPosition = 0; function toggleScrollLock() { const body = document.body; if (!isLocked) { // 记录当前滚动位置 scrollPosition = window.pageYOffset; // 固定布局防止跳动 body.style.position = 'fixed'; body.style.top = `-${scrollPosition}px`; body.style.width = '100%'; // 添加事件监听 document.addEventListener('wheel', preventScroll, { passive: false }); document.addEventListener('touchmove', preventScroll, { passive: false }); } else { // 恢复原始状态 body.style.position = ''; body.style.top = ''; body.style.width = ''; window.scrollTo(0, scrollPosition); // 移除事件监听 document.removeEventListener('wheel', preventScroll); document.removeEventListener('touchmove', preventScroll); } isLocked = !isLocked; } ``` #### 使用示例 ```javascript // 触发滚动锁定 toggleScrollLock(); // 再次调用解除锁定 toggleScrollLock(); ``` #### 注意事项 1. `position: fixed`会导致页面布局上移,需要配合`top`属性补偿滚动位置 2. 移动端需同时处理`touchmove`事件 3. CSS设置`overflow: auto`可确保滚动条常驻 4. 键盘滚动事件(空格/方向键)需额外处理`keydown`事件
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值