Disabilita lo scorrimento sul corpo

138

Vorrei disabilitare completamente lo scorrimento dell'HTML body. Ho provato le seguenti opzioni:

overflow: hidden; (non funziona, non ha disabilitato lo scorrimento, ha semplicemente nascosto la barra di scorrimento)
position: fixed; (funzionava, ma scorreva completamente verso l'alto, il che è inaccettabile per questa specifica applicazione)

Non sono riuscito a trovare alternative a queste due opzioni, ce ne sono altre?

html css scroll

— Micha Wiedenmann
fonte

3

per quale elemento hai applicato l'overflow: nascosto?

— Sajad Karuthedath,

Cosa stai cercando di ottenere esattamente qui? Qual è il tuo obiettivo finale?

— jbutler483,

2

Mostrare il codice pertinente ti aiuterà più facilmente.

— Sleek Geek,

1

troppo pieno: nascosto; è la strada da percorrere. Se non funziona hai qualche altro problema nel tuo CSS. Prova html, body {overflow: hidden;} se non funziona prova * {overflow: hidden;} e prova a capire cosa non va

— Jonas Grumann

246

Imposta heighte overflow:

html, body {margin: 0; height: 100%; overflow: hidden}

http://jsfiddle.net/q99hvawt/

— pantera
fonte

3

dimenticato "html" prima di "body.

2

Non funziona su iOS quando hai un elemento overlay che ha una posizione fissa.

— notQ

1

Potresti semplicemente aggiungere "overflow": "nascosto" e funzionerà benissimo.

— JPG,

Questa soluzione non ha funzionato immediatamente per me, ma dopo l'ispezione il "margine" è stato ignorato da qualche parte. Impostazione del "margine: 0;" di quell'elemento ha fatto il trucco.

— joaoprib,

19

HTML css funziona bene se il tag body non fa nulla che puoi scrivere anche tu

<body scroll="no" style="overflow: hidden">

In questo caso la sostituzione dovrebbe essere sull'etichetta del corpo, è più facile da controllare ma a volte dà mal di testa.

— Lalo
fonte

21

Questo non è valido HTML5

— mbomb007

@ mbomb007 Puoi per favore commentare l'errore qui relativo a HTML5?

— Ethan,

5

@Ethan L' scrollattributo non è valido sul <body>tag. Non è elencato come valido su qualsiasi specifica che posso trovare. w3schools ; MDN ; Quackit

— mbomb007,

14

Questo post è stato utile, ma volevo solo condividere una leggera alternativa che potrebbe aiutare gli altri:

L'impostazione max-heightinvece di fare heightanche il trucco. Nel mio caso, sto disabilitando lo scorrimento in base a un interruttore di classe. L'impostazione .someContainer {height: 100%; overflow: hidden;}quando l'altezza del contenitore è inferiore a quella della finestra allungherebbe il contenitore, che non sarebbe quello che vorresti. Impostando gli max-heightaccount per questo, ma se l'altezza del contenitore è maggiore di quella della finestra quando il contenuto cambia, disabilita comunque lo scorrimento.

— joebjoe
fonte

questo mi ha salvato la giornata per i browser desktop senza effetti collaterali indesiderati di scroll-top-top. ma non ha funzionato sui browser mobili (iphone5s e android).

— bob

5

Per fare ciò, aggiungi 2 proprietà CSS <body>sull'elemento.

body {
   height: 100%;
   overflow-y: hidden;
}

In questi giorni ci sono molti siti Web di notizie che richiedono agli utenti di creare un account. In genere forniscono l'accesso completo alla pagina per circa un secondo, quindi mostrano un pop-up e impediscono agli utenti di scorrere verso il basso.

— bvdb
fonte

questo nasconde la barra di scorrimento. Tuttavia, la domanda è in particolare quella di chiedere un'alternativa a nascondere la barra di scorrimento

— DataGeek il

@DataGeek, questo non solo nasconde la barra di scorrimento, ma interrompe anche la possibilità di scorrere verso il basso. E a quanto ho capito, è quello che è stato chiesto. cioè non solo nascondendolo, ma rendendo anche impossibile scorrere verso il basso.

— bvdb,