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?
phpcn_u15822017-05-18 11:00:54
0
4
431
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?
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
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.
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
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
You can prevent bubbling in the scroll event of the popup layer
event.stopPropagation(). Then when scrolling the pop-up layer, the external scroll event will not be triggered.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.
Set the width and height of the body to 100% and overflow: hidden; the popup layer overflow: auto; should be fine