一、CSS方法
固定定位与溢出隐藏
```css
html, body {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow-y: hidden;
}
```
适用于需要完全禁止页面滚动的场景，但会锁定页面，用户无法通过浏览器后退或刷新。
全屏覆盖层
```css
.no-scroll {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.9);
z-index: 1000;
overflow: hidden;
}
```
可通过JavaScript动态添加或移除该类实现显示/隐藏，适用于需要部分区域禁用滚动的场景。
二、JavaScript方法
阻止触摸移动事件
```javascript
document.body.addEventListener('touchmove', function(e) {
e.preventDefault();
}, { passive: false });
```
需注意在iOS设备上需设置`{ passive: false }`以兼容性能优化限制，适用于需要完全禁止滚动的场景。
结合后退按钮控制
```javascript
let canGoBack = true;
window.addEventListener('popstate', function(event) {
canGoBack = true;
});
document.body.addEventListener('touchmove', function(e) {
if (!canGoBack) {
e.preventDefault();
}
}, { passive: false });
// 隐藏后退按钮
window.history.pushState(null, null, document.URL);
```
通过控制浏览器历史记录和事件监听，实现类似“禁用后退”的效果，但用户体验可能受限。
三、注意事项
兼容性问题
- iOS Safari对`touchmove`事件的`preventDefault（）`有性能限制，建议始终添加`{ passive: false }`参数。
- 微信等内嵌浏览器可能对CSS属性的支持不完整，需通过JavaScript强制设置。
用户体验
- 禁止滑动可能影响页面的可访问性，建议仅在必要时使用（如加载动画、表单提交时）。
- 若需允许部分区域滚动，可结合CSS的`overflow: scroll`与JavaScript的事件拦截实现更精细控制。
替代方案
- 若需实现下拉刷新，可考虑使用原生小程序的`catchtouchmove`事件，或通过第三方库（如`ionic`）实现兼容性更好的效果。
四、示例代码综合应用
以下是一个结合CSS和JavaScript的完整示例，适用于需要兼容多平台的场景：
```html
滚动我
