Come disabilitare lo scorrimento su una pagina web con JavaScript
Disabilita lo scorrimento su una pagina web
Lo scorrimento delle pagine Web può essere facilmente disabilitato usando JavaScript in vari modi, ma in questo articolo vedremo solo due modi per disabilitarlo che sono elencati di seguito:
- Metodo 1: sovrascrivendo la finestra.funzione onscroll
- Metodo 2: impostando l'altezza del corpo al 100% e traboccante
Ognuno di questi metodi è spiegato di seguito insieme agli esempi per una migliore dimostrazione e la tua comprensione.
Sopravvalutando la finestra.funzione onscroll
L'evento finestra.onscroll viene licenziato quando la finestra è stata scorretta, eliminando così e l'impostazione della funzione su un valore fisso disabiliterà l'effetto di scorrimento per la pagina Web.
Puoi trovare la posizione attuale di scorrimento dall'alto finestra.PageyOffset E documento.DocumentElement.scrolltop, entrambi i quali restituiranno il valore corrente di Y per scorrimento. Questi due sono usati insieme usando l'operatore o logico "||" Poiché uno di loro potrebbe restituire 0 su alcuni browser.
Ora, per trovare il valore di X Scroll possiamo usare finestra.PAGEXOFFSET e il documento.DocumentElement.scrollt che vengono utilizzati in modo simile come scorrimento y, usando o operatore e restituiscono il valore per X per la pagina Web.
Ora dopo questo useremo finestra.scrollto () insieme ai due valori sopra per impostare la posizione di scorrimento della pagina web su quel valore. È possibile abilitare lo scorrimento indietro sfocando la finestra.funzione onscroll per blank una funzione vuota.
Di seguito è riportato il codice fornito per disabilitare lo scorrimento della pagina Web utilizzando questo metodo:
Html:
Benvenuti sul nostro sito web
Fai clic sui pulsanti seguenti per abilitare o disabilitare lo scorrimento.
JavaScript:
functionDisable ()// per ottenere la posizione di scorrimento della pagina Web corrente
TopsCroll = finestra.Pageyoffset || documento.DocumentElement.scrolltop;
Sinistraproll = finestra.PAGEXOFFSET || documento.DocumentElement.scrollt,
// Se si verifica Scroll, impostalo sul valore precedente
finestra.onscroll = function ()
finestra.scrollto (sinistra, topscroll);
;
funginAble ()
finestra.onscroll = function () ;
Produzione:
Impostando l'altezza del corpo al 100% e traboccante
In questo metodo utilizziamo CSS per disabilitare le pagine Web. Nella classe CSS abbiamo impostato l'altezza al 100% e quindi impostiamo la proprietà Overflow su nascosta che disabilita la barra di scorrimento della pagina web.
Il metodo documento.corpo.classlist.Aggiungi ("ClassName") viene utilizzato per aggiungere il nome della classe all'elemento corporeo e quindi disabilitare lo scorrimento. Per abilitare lo scorrimento indietro, la classe viene rimossa dal metodo utilizzando documento.corpo.classlist.Rimuovi ("ClassName").
Html:
Benvenuti sul nostro sito web
Fai clic sui pulsanti seguenti per abilitare o disabilitare lo scorrimento.
JavaScript:
Produzione:
Conclusione
JavaScript viene utilizzato per vari scopi come la creazione di caselle di input, barre di navigazione, azioni sugli eventi clicca ecc. Attraverso JavaScript possiamo anche abilitare e disabilitare l'azione di vari componenti sulla nostra pagina web. In questo articolo abbiamo discusso di come disabilitare lo scorrimento su una pagina web con JavaScript e discusso due metodi diversi insieme a esempi e codice per una migliore comprensione dei tuoi. Entrambi questi metodi sono facilmente utilizzati e possono aiutare gli utenti a disabilitare facilmente la barra di scorrimento.