移动端，JQUERY如何实现点击并弹窗后，禁止页面滚动？

Question

问题如标题所示。
比如，页面滚动到一半的位置，点击某个文字弹窗，然后页面禁止滚动？

我使用overflow:hidden，或position:fixed，在IOS端都会返回顶部，但我不需要返回顶部，只需要在哪弹窗就在哪禁止页面滚动。请问该怎么做啊？还望大佬能够给予帮助，非常感谢！~

Answer 1

这种场景很常见，通常是在弹窗弹起的时候同时修改body的样式，将body的内容通过overflow切掉当前窗口以外的内容（实际上就是给body定个位，然后top设置成当前滚动的位置。）
给你个示例代码：

if(val){//弹窗弹起的时候
                this.top = document.documentElement.scrollTop;
                document.body.style.position = 'fixed';
                document.body.style.height = '100vh';
                document.body.style.overflow = 'hidden';
                document.body.style.top = -+this.top+'px';

            }else{//弹窗消失的时候
                document.body.style.position = 'static';
                document.body.style.height = 'auto';
                document.body.style.overflow = 'auto';
                window.scrollTo(0,this.top)
            }

Answer 2

监听遮罩层的touchmove事件，调用event.preventDefault()

Answer 3

插件
其实这事对h5来说还挺不好干，我觉得作为一种体验增强即可，也不用这么强要求，配合使用overflow-behavior