javascript - The default page has scroll bars. When the pop-up layer appears, how can I hide the original scroll bar and make the pop-up content scrollable?

Question

On the mobile phone page, the default body content is a lot, with scroll bars. When a pop-up layer appears when clicked, the body content cannot be scrolled, but the pop-up layer can be scrolled! How to deal with it?

Answer 1

It seems that there is no need to set anything separately. When the pop-up layer appears, set the original content to overflow and hide, the pop-up layer will overflow automatically, and the opposite will be true when closing it

Answer 2

You can prevent bubbling in the scroll event of the popup layerevent.stopPropagation(). Then when scrolling the pop-up layer, the external scroll event will not be triggered.

$(".pop_box").on("touchmove",function(event){
    event.stopPropagation()
})

Answer 3

You can try the modal box of bootstrap. It seems that the pop-up layer of the modal box can be scrolled, but the body cannot.

Answer 4

Set the width and height of the body to 100% and overflow: hidden; the popup layer overflow: auto; should be fine