How can I activate the overscroll effect in Android web to indicate reaching the end of a scrollable element (like glow effect or stretching effect)?
It seems like it’s automatically applied for root container(body or HTML maybe), but I can’t find a way to apply it to nested scrollable elements within. It works well on iOS, but not on Chrome/Firefox on Android.
I’d like overscroll effect to be applied when scrolling div.content in the following code, for example. You can test below code on https://scroll-test.pages.dev/
<html>
<body>
<div class="el">
<div class="content">this is content</div>
</div>
</body>
</html>
<style>
div.el {
width: 200px;
height: 300px;
overscroll-behavior: contain;
margin: 30px;
border: 1px solid black;
overflow: scroll;
.content {
height: 800px;
}
}
</style>