上层滚动 下层不摇滚

2016-06-23 Oliver Wang 更多博文 » 博客 » GitHub »

原文链接 http://ochukai.me/prevent-deep-div-scroll-with-the-top-element/
注：以下为加速网络访问所做的原文缓存，经过重新格式化，可能存在格式方面的问题，或偶有遗漏信息，请以原文为准。

最近写手机页面颇多, 经常有弹出框, 或者下拉列表, 如果弹框或者下拉列表的内容太多,出现了滚动条, 恰好外面的内容也很多,也有滚动条的话,就会出现一种情况:

例子

比如上图, 当用力划一下屏幕, 下拉框滚到底了之后, body 随之也开始滚, 很讨厌。出现过好多次了, 而且测试逼我太紧~

我要解决这个问题啊

其实很简单, 只要弹出下拉列表的时候让下层的元素不能滚动就好了。

.modal-open { 
  overflow: hidden;
}

js 的话就这么写:

  function show($div) {
    $('body').addClass('modal-open');
    // ...
  }

  function hide($div) {
    $('body').removeClass('modal-open');
    // ...
  }

以上。