Desabilitando a Rolagem Sem Ocultar: Uma Solução CSS
Resposta Rápida
Para desabilitar a rolagem da página sem esconder a barra de rolagem, aplique as seguintes propriedades CSS. Defina overflow-y para um valor que mantenha a barra de rolagem visível e defina position para fixar a posição da página. Ajuste o deslocamento do conteúdo utilizando padding-right e use top para manter a posição de rolagem atual do usuário:
body.no-scroll {
overflow-y: scroll; /* Permite que a barra de rolagem fique visível */
position: fixed; /* Impede a rolagem da página */
width: 100%; /* Fixa a largura da página */
top: calc(-1 * var(--scroll-position)); /* Lembra a posição da rolagem */
}Para bloquear a rolagem, adicione a classe .no-scroll à tag <body>.
Antes de adicionar a classe "no-scroll", lembre-se da posição de rolagem atual:
const scrollY = window.scrollY || document.documentElement.scrollTop;
document.documentElement.style.setProperty('--scroll-position', `${scrollY}px`);
document.body.classList.add('no-scroll'); /* Pausa a rolagem */Para retomar a rolagem, remova a classe e restaure a posição de rolagem:
const scrollY = document.documentElement.style.getPropertyValue('--scroll-position');
document.documentElement.style.removeProperty('--scroll-position');
window.scrollTo(0, parseInt(scrollY || '0'));
document.body.classList.remove('no-scroll'); /* Retoma a rolagem */Como resultado dessas ações, deslocamentos visuais e a perda da posição de rolagem atual são evitados, garantindo uma experiência de usuário confortável.
Prevenindo Deslocamentos de Layout
Para eliminar deslocamentos de conteúdo ao bloquear a rolagem, siga estas etapas:
1. Defina a largura do `<body>` como `width: 100%` ao usar `position: fixed` para manter o layout estável.
2. Use a propriedade `inline-size` para garantir largura consistente em diferentes navegadores.
3. Utilize variáveis CSS para ajustes dinâmicos de largura.
4. Aborde a questão das **duplas barras de rolagem** e implemente media queries e outras sugestões da comunidade.Verifique a presença de uma barra de rolagem vertical:
const hasVerticalScrollbar = document.body.scrollHeight > window.innerHeight;
if (hasVerticalScrollbar) {
// Aplica o método "no-scroll"
}Melhorando a Usabilidade
- Lembre-se da posição de rolagem antes de bloquear e restaure-a depois para uma navegação sem interrupções.
- Ajuste a suavidade da rolagem usando a propriedade CSS
scroll-behavior: smooth;ou utilize métodos JavaScript descritos na SitePoint.
Dicas jQuery
É jQuery sua opção preferida? Aqui está o código para gerenciar a rolagem:
$.fn.disableScroll = function() {
this.each(function() {
const scrollTop = $(window).scrollTop();
$(this).css({
overflow: 'scroll',
position: 'fixed',
width: '100%',
top: `-${scrollTop}px` /* Lembra a posição de rolagem */
});
});
};
$.fn.enableScroll = function() {
const scrollY = this.css('top');
this.css({
overflow: '',
position: '',
top: '',
width: ''
});
$('html, body').scrollTop(-parseInt(scrollY || '0')); /* Retoma a rolagem */
};
$('body').disableScroll(); /* Pausa a rolagem */
$('body').enableScroll(); /* Retoma a rolagem */Não esqueça de tratar eventos e a capacidade de desativá-los usando o método .off() no jQuery.
Visualização
Imagine que seu site é uma galeria 🖼️, e o vidro é o elemento sendo rolado pelo usuário.
- Os visitantes podem VER as obras (🖼️1️⃣ 🖼️2️⃣ 🖼️3️⃣), mas devido ao vidro, eles não conseguem movê-las.
- A barra de rolagem, por sua vez, é o pegador que pode mover a visualização para cima e para baixo.
Quando você desabilita a rolagem enquanto a mantém visível:
- Mantenha o vidro **INTEIRO** e **TRANSPARENTE**, mas faça-o **IMÓVEL** (🔒🖼️).
- Assim, os visitantes podem **VER** o pegador (barra de rolagem), mas não podem usá-lo.Essa metáfora ajuda a entender como desabilitar a rolagem funciona sem remover a barra de rolagem.
| Ação | Galeria Virtual 🖼️ |
| --------------------------- | ------------------- |
| Visibilidade da barra | Vidro transparente ✅ |
| Capacidade de rolar | Vidro bloqueado 🔒 |Fique atento a exemplos bem-sucedidos, como sobreposições na biblioteca Fancyapp. Aproveite a experiência da comunidade e adapte-a às especificidades de vários navegadores.
Recursos Úteis
- css - Como desabilitar programaticamente a rolagem da página com jQuery - Stack Overflow — Discussão no Stack Overflow sobre como parar a rolagem.
- overflow - CSS: Folhas de Estilo em Cascata | MDN — Guia da MDN sobre a propriedade CSS
overflow. - pointer-events | CSS-Tricks — Artigo sobre como controlar interações com elementos através de
pointer-events. - CSS Layout - A Propriedade position — Uma explicação útil da propriedade
position: fixede seu uso para bloquear a rolagem no W3Schools. - Estilizando Barras de Rolagem | WebKit — Personalizando o design da barra de rolagem em navegadores que usam o motor WebKit.
- Prevenir a Rolagem da Página Quando um Modal Está Aberto | CSS-Tricks — Método da CSS-Tricks para parar a rolagem enquanto se trabalha com modais.
- Como Implementar Rolagem Suave em Vanilla JavaScript — SitePoint — Dicas e técnicas do SitePoint para conseguir uma rolagem suave da página em JavaScript.