JavaScript é uma linguagem da web usada para criar páginas dinâmicas da web e torná -las interativas para usuários. Através do JavaScript, podemos executar várias funções, alterar CSS de elementos HTML, executar ações em cada clique e muito mais.JavaScript torna a página do nosso site mais interativa e adiciona comportamentos dinâmicos a ele, podemos criar vários menus, menus suspensos, barras de rolagem etc. Podemos até ativar e desativar o comportamento de cada um desses componentes usando JavaScript. Neste artigo, veremos como desativar a rolagem em uma página da web usando JavaScript.

Desative a rolagem em uma página da web

A rolagem nas páginas da web pode ser facilmente desativada usando JavaScript de várias maneiras, mas neste artigo só veremos duas maneiras de desativá -lo, listadas abaixo:

• Método 1: Ao substituir a janela.função scroll
• Método 2: Ao definir a altura do corpo para 100% e transbordar para oculto

Cada um desses métodos é explicado abaixo, juntamente com exemplos para melhor demonstração e sua compreensão.

Substituindo a janela.função scroll

O evento janela.OnScroll é disparado quando a janela foi rolada, substituindo e definindo a função em um valor fixo desativará o efeito de rolagem para sua página da web.

Você pode encontrar a posição atual de rolagem de cima para janela.Pageyoffset e documento.DocumentElement.scrolltop, ambos retornarão o valor atual de Y role. Esses dois são usados ​​juntos usando o operador lógico “||” como um deles pode retornar 0 em alguns navegadores.

Agora, a fim de encontrar o valor de X Roll podemos usar janela.PageXoffset e a documento.DocumentElement.rollleft que são usados ​​da mesma forma que y rolagem, usando ou operador e retornam o valor para o scroll da página da web.

Agora, depois disso, usaremos janela.scrollto () junto com os dois valores acima para definir a posição de rolagem da sua página da web para esse valor. Você pode ativar a rolagem de volta, substituindo a janela.função scroll para em branco uma função em branco.

Abaixo está o código fornecido para desativar a rolagem da página da web usando este método:

Html:

Bem-vindo ao nosso site

Clique nos botões abaixo para ativar ou desativar a rolagem.

Desative a rolagem
Ativar rolagem

JavaScript:

functionDisable ()
// Para obter a posição de rolagem da página da web atual
TopScroll = janela.Pageyoffset || documento.DocumentElement.scrolltop;
LeftScroll = janela.PageXoffset || documento.DocumentElement.rollleft,
// Se ocorrer rolagem, defina -o para o valor anterior
janela.OnScroll = function ()
janela.scrollTo (LeftScroll, TopScroll);
;

functionEnable ()
janela.onScroll = function () ;

Saída:

Definindo a altura do corpo para 100% e transbordar para ocultar

Neste método, usamos CSS para desativar a rolagem nas páginas da web. Na classe CSS, definimos a altura para 100% e depois definimos a propriedade Overflow como oculta, que desativa a barra de rolagem da página da web.

O método documento.corpo.Lista de classe.Adicionar ("ClassName") é usado para adicionar o nome da classe ao elemento corporal e, portanto, desativar a rolagem. Para ativar a rolagem de volta, a classe é removida do método usando documento.corpo.Lista de classe.Remover ("ClassName").

Html:

Bem-vindo ao nosso site

Clique nos botões abaixo para ativar ou desativar a rolagem.

Desative a rolagem
Ativar rolagem

JavaScript:

Saída:

Conclusão

JavaScript é usado para vários propósitos, como criar caixas de entrada, barras de navegação, em ações de cliques etc. Através do JavaScript, também podemos ativar e desativar a ação de vários componentes em nossa página da web. Neste artigo, discutimos como desativar a rolagem em uma página da web com JavaScript e discutimos dois métodos diferentes, juntamente com exemplos e código para uma melhor compreensão sua. Ambos os métodos são facilmente usados ​​e podem ajudar os usuários a desativar a barra de rolagem facilmente.