reduce scroll chaining on scrollable modals #100

mummified-corroding-granny · 2023-01-27T03:53:54Z

2023-01-27 03:53:54 +00:00

Small lil PR to reduce/minimize overscroll (aka scroll chaining) when scrolling to the end of scrollable modals. Also relevant to mobile

Primary targets:

GIFs scrollable tabs body
EMOJI scrollable tabs body
AWARDS scrollable tabs body

Should (TM) apply to other scrollable modals if the same HTML structure is used

Very important notes (TM):

this does not apply to non-scrollable modals (e.g. delete and report)
this only applies to the body of the modal where scrollable content is usually located (as per selector). Example of when it does not apply:
- if we try to scroll near the search bar (e.g. on GIFs modal), we will still scroll the background
- if we make the modal non-scrollable (e.g. limited search in emoji or its tabs), there is no overscroll protection

Why I chose this implementation:

I have implemented this recently when all browsers started supporting it in the last months of 2022
we cannot just disable the main body/html element scrollbar because it is likely to create headache-inducing content redraw situations
minimalistic and it is a relatively modern way to do it
about 300% better than some client-side javascript spaghetteh to avoid content redraws
methodical alternative is to reimplement site-wide modals/scrolling (LMAO)
I did not apply it to .modal-body because it does not work when we scroll in the empty area on the sides of the scrollable area (which I always do).

Small lil PR to reduce/minimize overscroll (aka scroll chaining) when scrolling to the end of scrollable modals. Also relevant to mobile Primary targets: - GIFs scrollable tabs body - EMOJI scrollable tabs body - AWARDS scrollable tabs body Should (TM) apply to other scrollable modals if the same HTML structure is used Very important notes (TM): * this does not apply to non-scrollable modals (e.g. delete and report) * this only applies to the body of the modal where scrollable content is usually located (as per selector). Example of when it does not apply: * if we try to scroll near the search bar (e.g. on GIFs modal), we will still scroll the background * if we make the modal non-scrollable (e.g. limited search in emoji or its tabs), there is no overscroll protection Why I chose this implementation: * I have implemented this recently when all browsers started supporting it in the last months of 2022 * we cannot just disable the main body/html element scrollbar because it is likely to create headache-inducing content redraw situations * minimalistic and it is a relatively modern way to do it * about 300% better than some client-side javascript spaghetteh to avoid content redraws * methodical alternative is to reimplement site-wide modals/scrolling (LMAO) * I did not apply it to .modal-body because it does not work when we scroll in the empty area on the sides of the scrollable area (which I always do).

mummified-corroding-granny added 1 commit 2023-01-27 03:53:54 +00:00

99b37c4487 reduce scroll chaining on scrollable modals

Aevann merged commit ea47902127 into master

2023-01-27 06:08:30 +00:00

Aevann referenced this issue from a commit

2023-01-27 06:08:30 +00:00

reduce scroll chaining on scrollable modals (#100)

Sign in to join this conversation.

No reviewers