Modal the underlying scroll after the popup layer

See a nice introduction a discussion on the rolling principle triggered by the popup layer

When you experiment, you know that it's easy to work on the Web:

htmlbody{    overflow: hidden;}

1. This can only solve the problem on the web, the mobile side does not work
2. There will still be some page width adaptation issues with this process

Because I'm using the public number development (mobile), so looking for a mobile-end solution,
Most of the answer is to disable the touch event when the pop-up layer pops up, and add the event when the pop-up layer disappears:

//Record the original event function in order to recovervarOldonwheel, Oldonmousewheel, Oldonkeydown, Oldontouchmove;varisdisabled;functionPreventdefault (e) {e = e | |window. event;    E.preventdefault && E.preventdefault (); E.returnvalue =false;}varDisablescroll =function() {Oldonwheel =window. Onwheel;window. Onwheel = Preventdefault; Oldonmousewheel =window. OnMouseWheel;window. OnMouseWheel = Preventdefault; Oldonkeydown =Document. onkeydown;Document. onkeydown = Preventdefaultforscrollkeys; Oldontouchmove =window. Ontouchmove;window. Ontouchmove = Preventdefault; isdisabled =true;};varEnablescroll =function(){if(!isdisabled) {return; }window. Onwheel = Oldonwheel;window. OnMouseWheel = Oldonmousewheel;Document. onkeydown = Oldonkeydown;window. Ontouchmove = Oldontouchmove; isdisabled =false;};

It does solve the problem for pages that don't scroll in modal, but it doesn't matter if the content in the modal needs to be scrolled.

Final Solution:

弹出层父元素设置属性为overflow-y:scroll;弹窗弹出时，用js控制让底层元素的position属性设置为fixed;弹窗关闭时候，用js控制底层元素的position属性为正常；在iOS端，为了弹窗里面的滚动效果看起来顺滑，需要设置弹窗层的包裹元素属性：-webkit-overflow: touch;

In fact, there is a small problem, that is, when the pop-up layer disappears, the bottom page will automatically scroll to the top, we can record the current position when the pop-up layer pops up, and then the popup layer disappears when the JS control scroll to the previous position

Modal the underlying scroll after the popup layer