This is the 14th day of my participation in the More text Challenge. For more details, see more text Challenge
introduce
Or trivia, passing on some lesser-known front-end knowledge.
Overscrollbehavior (MDN) overscrollbehavior (MDN) overscrollBehavior (MDN) overscrollBehavior (MDN
Abstract:
When a dialog box contains scrollable content, once the boundary of the dialog box is scrolled, the page content below the dialog box also begins to scroll — this is called a “scrollchain”.
Combining the above summary with our actual development scenario, it is often the case that we need to develop a popover in our page, but after the popover, the user can still scroll through the page with the scroll wheel.
So we can use this property to stop scrolling the page behind the popover.
attribute
Let’s start with a diagram of the MDN official attribute values and their descriptions.
Auto: The default value, but note that auto includes the mobile bottom effect
Contain: Contain: contain
None: Disables scrolling (including touch bottom)
Look at a case
The official example is that after adding the properties, I recorded with the default values for convenience.
And this is often the case, when you have a popover, scrolling through the popover causes the page to scroll along.
The official example is here
Following the official example, if you want to scroll over the popover without affecting the page, just add the property oversroll-behavior: Contain to the stand and you will be able to scroll over the popover without affecting the page.
Compatible with
As usual, take a look at compatibility.
I can’t say it’s totally unusable, just a little brutal.
However, mainstream Chrome, Firefox, and Edge are all compatible.
So if there’s an application, it’s worth considering.
Partially incompatible pages do not have this effect at best, but are accessible to users of major browsers.
conclusion
Front-end trifling knowledge, take a look at the love of the concubines in the cold palace.
The attributes mentioned in this article, if you remember them during development, are worth using to see how they work.
Compatibility, the future can be expected.