jquery如何禁止手机滚动

# jQuery如何禁止手机滚动

在移动端网页开发中，有时需要临时禁止页面滚动（例如弹出层出现时）。使用jQuery可以快速实现这一效果，以下是几种常见方法：

## 方法一：禁用touchmove事件

```javascript
// 禁止滚动
function disableScroll() {
  $(document).on('touchmove', function(e) {
    e.preventDefault();
  });
}

// 恢复滚动
function enableScroll() {
  $(document).off('touchmove');
}

原理：通过阻止touchmove事件的默认行为来禁用触摸滚动。

方法二：CSS+JS组合方案

// 禁止滚动
function disableScroll() {
  $('html, body').css({
    'overflow': 'hidden',
    'height': '100%'
  });
}

// 恢复滚动
function enableScroll() {
  $('html, body').css({
    'overflow': 'auto',
    'height': 'auto'
  });
}

优点：同时解决了PC端和移动端的滚动问题。

方法三：动态添加禁止滚动类

.no-scroll {
  position: fixed;
  width: 100%;
  overflow: hidden;
}

// 禁止滚动
$('body').addClass('no-scroll');

// 恢复滚动
$('body').removeClass('no-scroll');

注意事项

1. 性能影响：方法一会阻止所有touchmove事件，可能影响页面内其他需要滑动操作的组件
2. 滚动位置：方法三会导致页面滚动位置丢失，恢复时需要手动记录位置
3. 兼容性：iOS8以下版本可能需要特殊处理

推荐方案

对于大多数场景，推荐使用方法二：

function toggleScroll(disable) {
  $('html, body').css({
    'overflow': disable ? 'hidden' : 'auto',
    'position': disable ? 'fixed' : 'static'
  });
}

这种方法兼容性好，且不会影响页面布局，是最安全的实现方式。 “`