How to disable scrolling while popup active in JavaScript?

How to disable scrolling while popup active in JavaScript?

Then, when closing the popup by triggering some action or dismissing it with a click, you simply remove the class again, allowing scroll after the popup has closed. If the user then scrolls while the popup is open, the document will not scroll.

How to prevent page scrolling when a modal is open?

We can use JavaScript to avoid the touch event bubble. We all know there should be a backdrop layer when a modal is open. Unfortunately, stopPropagation is a little awkward with touch in iOS. But preventDefault works well.

What happens when you close a popup in JavaScript?

In addition to that, when they close the popup they will now be in a different position on the page. A solution is that, when you bind a click event in javascript to display this popup, to also add a class to the body with essentially these rules:

How can I make CSS not scroll back to top of screen?

If we know the top of the scroll location and add it to our CSS, then the body will not scroll back to the top of the screen, so problem solved. We can use JavaScript for this by calculating the scroll top, and add that value to the body styles:

Is it good or bad to use perfect scrollbar?

Finally, scroll hooking is generally considered a bad practice, and perfect-scrollbar should be used carefully. Unless custom scroll is really needed, using browser-native scroll is always recommended. perfect-scrollbar emulates some scrolls, but not all of the kinds.

Is it possible to get a tooltip with a scroll bar?

Is it possible to achieve a ToolTip with a Scrollbar, where scroll bar appear if the content can’t fit in the given ToolTip display area. We would be able achieve this using ToolTip ContentTemplate..

Can a popup be scrolled instead of a whole document?

Now, if your popup has a large contents that doesn’t fit in 50 pixels by height and you’ll scroll on it, contents in popup will be scrolled instead of whole document contents. Thanks for contributing an answer to Stack Overflow!