reduce scroll chaining on scrollable modals (#100)

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).

Reviewed-on: #100
Co-authored-by: mummified-corroding-granny <mummified-corroding-granny@noreply.fsdfsd.net>
Co-committed-by: mummified-corroding-granny <mummified-corroding-granny@noreply.fsdfsd.net>
pull/102/head
mummified-corroding-granny 2023-01-27 06:08:29 +00:00 committed by Aevann
parent 23843cd7a8
commit ea47902127
1 changed files with 5 additions and 0 deletions

View File

@ -1897,6 +1897,11 @@ button.close {
.modal-dialog-scrollable .modal-body {
overflow-y: auto;
}
.modal-content > div:last-child {
overscroll-behavior: contain;
}
.modal-dialog-centered {
display: flex;
align-items: center;