/* * Trava de rolagem do fundo — a de verdade, a que o celular respeita * ============================================================================ * * Cada tela do tema tinha a sua: `body.kid-modal-aberto { overflow: hidden }`, * `body.vst-modal-aberto`, `body.trn-modal-aberto`… vinte e cinco cópias da * mesma regra, e as vinte e cinco falhavam no mesmo lugar. * * POR QUE `overflow: hidden` NO BODY NÃO BASTA * * 1. Quem rola o documento no iOS (e no WebView do app) é o elemento raiz, não * o ``. Escondendo o transbordo do body o documento continua rolando * por baixo do modal — foi o que o Jonathan viu no app. * 2. Mesmo onde o body é o scroller, o gesto que chega ao fim do corpo do * modal ENCADEIA para o ancestral rolável (scroll chaining). O fundo anda * junto com um empurrão a mais no fim da lista, e isso acontece em qualquer * navegador sem `overscroll-behavior`. * * A saída é a que as bibliotecas de scroll lock usam: tirar o documento do * fluxo com `position: fixed` e compensar a rolagem perdida no `top`. O JS * (`assets/js/travar-fundo-modal.js`) guarda o `scrollY`, escreve o * deslocamento na custom property e devolve a posição ao liberar. */ html.congrega-fundo-travado { overflow: hidden; overscroll-behavior: none; } body.congrega-fundo-travado { /* * `--congrega-fundo-topo` é o `scrollY` negativado, escrito pelo JS. Sem * ele a página salta para o alto no instante em que o modal abre, que é * exatamente o defeito que esta folha existe para não criar. */ position: fixed; top: var(--congrega-fundo-topo, 0px); left: 0; right: 0; width: 100%; overflow: hidden; overscroll-behavior: none; } /* * Corta o encadeamento no scroller do modal. * * O tema nomeia esse elemento igual em todas as telas (`kid-modal-corpo`, * `vst-modal-corpo`, `trn-modal-corpo`…), e as telas que ainda usam a casca do * Bootstrap trazem `.modal-body`. O seletor por substring alcança as duas * famílias sem precisar tocar em vinte e cinco folhas. */ [class*="-modal-corpo"], [class*="-modal-body"], .modal-body { overscroll-behavior: contain; }