手机浏览器如何禁止外部页面滚动，而允许部分内容滚动

Question

在图中，如何做到，允许弹出的下拉菜单滚动，但是禁止外部的页面的滚动。

同时，导航条使用了position:fixed定位，但是当快速拖动页面时，会有时出现页面把本应固定在底部，以及顶部的导航条，一起带着拖动了，然后又闪烁回其定位的位置。

这两种情况，该如何解决。求大神指点

Answer 1

有弹出层的时候，可以给底层，例如body用fixed定位，height100%，overflow，hidden。等弹出关了再去掉。

Answer 2

使用原生CSS

body.noscroll {
    touch-action: none;
    /* 当触控事件发生在元素上时，不进行任何操作 */
}

#navigation-bar {
    transform: transition3d(0,0,0);
    /* 强制使用GPU加速，避免滑动时position:fixed闪烁 */
}

Answer 3

这个禁止有点麻烦，你可能在模拟器下是有效果，但在真机下无效。虽然有一些方法，但是都不完美。移动端的固定定位一般使用绝对定位模拟，移动端禁止touchstart的默认行为，这样就不能滚动了。