Is there any way to prevent scroll-chaining, i.e. prevent the body from scrolling, by using a <div />
with overflow: scroll
and overscroll-behavior: contain
, without having contents that overflow said div?
It seems that it only works when the inner contents do in fact overflow the parent div. Does anyone know any workaround?
This chromium ticket seems to describe the same problem: https://bugs.chromium.org/p/chromium/issues/detail?id=813094
I expected overscroll-behavior: contain
to prevent scroll-chaining (the body from scrolling) even without having child contents within it that overflow.
I have made a Codepen here to visualize the issue: https://codepen.io/benjamindenboer/pen/RwEodWJ