Método de penetração de rolagem HTML5

O site precisa ser adaptado no lado mobile. Para mobile H5 e web, são utilizadas soluções de layout flexível como o bluma.

A lista usada em H5 usa react-virtualized para desenhar a tabela

Para exibir os detalhes específicos de uma única linha de dados na tabela, a solução usual é usar uma nova página ou uma janela pop-up.

A solução de janela pop-up é usada aqui. Os detalhes dos dados após clicar em uma única linha de dados usam o cartão modal da Bluma.

Para detalhes e exemplos específicos, consulte: https://bulma.io/documentation/components/modal/

Depois de clicar em uma única linha de dados, uma janela pop-up exibe dados detalhados e todo o cartão modal é definido como position:fixed;

Não há parte de rodapé, defina a altura do modal-card para a altura da tela inteira: 100vh

Desempenho:

• Quando exibido no navegador Chrome, todo o cartão modal ocupa a tela inteira.
• A tela do celular também está cheia, mas o problema é que se você mover de acordo com o gesto, a parte da caixa de pesquisa do navegador será empurrada para cima. Nesse momento, a página da lista de dados sob a janela pop-up pode. será deslizado e, em seguida, o título da janela pop-up cobrirá a parte original da caixa de pesquisa do navegador, mas há um atraso entre isso, você pode ver claramente os dados na página abaixo
• Haverá outra exibição em outros telefones celulares. Se a velocidade de deslizamento for relativamente rápida e você deslizar imediatamente após a janela pop-up aparecer, você verá um pequeno espaço em branco na parte inferior da janela pop-up. abaixo da janela pop-up pode ser rolada e há um atraso óbvio e exibição de rolagem de dados.

Solução:

Estouro de JS + CSS: oculto

Adicione dinamicamente classes CSS à página HTML na janela pop-up por meio de JS

 if ($modalButtons.length > 0) { $modalButtons.forEach(function ($el) { $el.addEventListener('click', function () { var target = $el.dataset.target; openModal(target); } ); });}function openModal(target) { var $target = document.getElementById(target); rootEl.classList.add('está cortado'); $target.classList.add('está ativo');}

 está cortado { estouro: oculto! importante}

Quando a janela pop-up for fechada, exclua a classe css da página através de JS: is-clipped

 function closeModals() { rootEl.classList.remove('is-clipped'); $modals.forEach(function ($el) { $el.classList.remove('is-active'); });}

Porém, após testar esta solução no aplicativo, constatou-se que ela não resolveu o problema e os problemas acima ainda ocorreram.

Posição JS + CSS: fixo + scrollTop

Planeje ideias:

1. Quando a janela pop-up aparecer, defina a posição do html como fixa. Após fechar a janela pop-up, cancele o atributo postion do html.
2. Como a página da lista rolará e a linha clicada poderá ocorrer após a rolagem, o valor scrollTop da própria página HTML precisa ser calculado.
3. Porque depois de definir a posição como fixa quando a janela pop-up ocorre, o valor scrollTop da página html se tornará 0 e retornará ao topo da página. Portanto, após fechar a janela pop-up, você precisa definir manualmente o valor. scrollTop valor da página HTML para permitir que ela role até a posição original da página HTML.
4. Para compatibilidade, você precisa definir o valor scrollTop de diferentes propriedades

Antes da janela pop-up:

 const scrollTop = global.document.documentElement.scrollTop || global.pageYOffset || global.document.body.scrollTop;global.document.documentElement.style.position = 'fixed';this.scrollTop = scrollTop;

Feche a janela pop-up:

 closeModalHandler = () => { const { closeOrderHistoryModal } = this.props; global.document.documentElement.style.position = '' global.pageYOffset = this.scrollTop; .document.body.scrollTop = this.scrollTop; closeOrderHistoryModal();}

O texto acima é todo o conteúdo deste artigo. Espero que seja útil para o estudo de todos. Também espero que todos apoiem a Rede VeVb Wulin.