Cómo deshabilitar el desplazamiento en una página web con JavaScript
Desactivar desplazamiento en una página web
El desplazamiento en las páginas web se puede deshabilitar fácilmente utilizando JavaScript de varias maneras, pero en este artículo solo veremos dos formas de deshabilitarlo que se enumeran a continuación:
- Método 1: anulando la ventana.Función de Onscroll
- Método 2: estableciendo la altura del cuerpo al 100% y se desbordan a oculto
Cada uno de estos métodos se explica a continuación junto con ejemplos para una mejor demostración y su comprensión.
Anulando la ventana.Función de Onscroll
El evento ventana.inscroll se dispara cuando la ventana se ha desplazada, por lo que anular y establecer la función en un valor fijo deshabilitará el efecto de desplazamiento para su página web.
Puede encontrar la posición actual de desplazamiento desde la parte superior hasta ventana.PageyOffset y documento.documento.cañón de desplazamiento, ambos devolverán el valor actual de Y desplazarse. Estos dos se usan juntos utilizando el operador o lógico "||" Como uno de ellos podría devolver 0 en algunos navegadores.
Ahora, para encontrar el valor de X desplazarse nosotros podemos usar ventana.PagexOffset y el documento.documento.scrollleft que se usan de manera similar como Y Scroll, usando u operador y devuelven el valor para X Scroll of the Web Page.
Ahora después de esto usaremos ventana.scrollto () junto con los dos valores anteriores para establecer la posición de desplazamiento de su página web a ese valor. Puede habilitar el desplazamiento hacia atrás anulando la ventana.Onscroll Función para blanco en blanco una función en blanco.
A continuación se muestra el código proporcionado para deshabilitar el desplazamiento de la página web utilizando este método:
HTML:
Bienvenido a nuestro sitio web
Haga clic en los botones a continuación para habilitar o deshabilitar el desplazamiento.
JavaScript:
functionDisable ()// para obtener la posición de desplazamiento de la página web actual
Topscroll = ventana.PageyOffset || documento.documento.scrolltop;
LeftScroll = Ventana.PagexOffset || documento.documento.scrollleft,
// Si ocurre el desplazamiento, configúrelo al valor anterior
ventana.onScroll = function ()
ventana.ScrollTO (LeftScroll, TopScroll);
;
functionenable ()
ventana.onScroll = function () ;
Producción:
Estableciendo la altura del cuerpo al 100% y se desbordan a escondidas
En este método usamos CSS para deshabilitar el desplazamiento en las páginas web. En la clase CSS establecemos la altura en 100% y luego establecemos la propiedad de desbordamiento en oculto que deshabilita la barra de desplazamiento de la página web.
El método documento.cuerpo.Lista de clase.agregar ("classname") se usa para agregar el nombre de clase al elemento del cuerpo y, por lo tanto, deshabilitar el desplazamiento. Para habilitar el desplazamiento hacia atrás, la clase se elimina del método utilizando documento.cuerpo.Lista de clase.eliminar ("classname").
HTML:
Bienvenido a nuestro sitio web
Haga clic en los botones a continuación para habilitar o deshabilitar el desplazamiento.
JavaScript:
Producción:
Conclusión
JavaScript se utiliza para diversos fines, como crear cuadros de entrada, barras de navegación, en acciones de eventos de clic, etc. A través de JavaScript también podemos habilitar y deshabilitar la acción de varios componentes en nuestra página web. En este artículo discutimos cómo deshabilitar el desplazamiento en una página web con JavaScript y discutimos dos métodos diferentes junto con ejemplos y código para una mejor comprensión suya. Ambos métodos se usan fácilmente y pueden ayudar a los usuarios a deshabilitar la barra de desplazamiento fácilmente.