Disabilita le barre di scorrimento verticali e orizzontali del browser

117

È possibile disabilitare le barre di scorrimento verticali e orizzontali del browser utilizzando jQuery o javascript?

javascript jquery

— Naveen
fonte

Penso che in alcune situazioni, specialmente se si desidera alternare tra scroll e no scroll, questa soluzione è più preferibile: stackoverflow.com/questions/8701754/…

— Yousef Salimpour

È possibile trovare una risposta più completa a questa domanda qui stackoverflow.com/a/25561646/1922144

— davidcondrey

144

Nel caso avessi bisogno della possibilità di nascondere e mostrare dinamicamente le barre di scorrimento, potresti usare

$("body").css("overflow", "hidden");

e

$("body").css("overflow", "auto");

da qualche parte nel tuo codice.

— Alexander Prokofyev
fonte

4

Overflow nascosto non funziona sempre in IE. Vedi la risposta di AnthonyWJones di seguito.

— Tiago Almeida

4

oveflow: hiddennon impedirà nulla sugli smartphone.

— dvlden

In Chrome, questo disabilita la barra di scorrimento senza nasconderla (è ancora lì e cambia ancora le dimensioni di tutto il resto, ma ora è disattivata)

— taltamir

121

function reloadScrollBars() {
    document.documentElement.style.overflow = 'auto';  // firefox, chrome
    document.body.scroll = "yes"; // ie only
}

function unloadScrollBars() {
    document.documentElement.style.overflow = 'hidden';  // firefox, chrome
    document.body.scroll = "no"; // ie only
}

— Lyncee
fonte

5

Due voti positivi sono notevolmente pochi per essere l'unica risposta javascript pura.

— Fzs2

2

@HermannIngjaldsson: Vedere OP ha chiesto una soluzione JavaScript o jQuery e aveva accettato una soluzione jQuery 4 anni fa, ha senso. Non sto dicendo che la risposta non sia buona, sto solo affermando l'ovvio sui voti bassi. +1 da me comunque.

— No

questa è l'unica soluzione che ha funzionato per me, dato che il body hidden overflow non attacca l'intero documento, questa è la soluzione giusta per questo problema! grazie mille, mi hai risparmiato un sacco di tempo!

— Adnane.T

Questa è una soluzione brillante e merita un voto positivo. Risolve anche il problema con il CSS corretto, in cui la pagina verrà scorrere verso l'alto.

— haipham 23

50

Prova CSS

<body style="overflow: hidden">

— Ray Lu
fonte

15

Per la compatibilità del browser aggiungerei questo stile anche al tag HTML: html, body {overflow: hidden;}

— Ady

32

Finora abbiamo overflow: nascosto sul corpo. Tuttavia IE non sempre lo onora e devi mettere scroll = "no" anche sull'elemento body e / o posizionare overflow: nascosto anche sull'elemento html.

Puoi andare oltre quando hai bisogno di 'prendere il controllo' della porta di visualizzazione puoi farlo: -

<style>
 body {width:100%; height:100%; overflow:hidden; margin:0; }
 html {width:100%; height:100%; overflow:hidden; }
</style>

Un elemento a cui è stata assegnata un'altezza del 100% nel corpo ha l'intera altezza della finestra di visualizzazione e l'elemento posizionato in modo assoluto utilizzando il fondo: nnPX verrà impostato nn pixel sopra il bordo inferiore della finestra, ecc.

— AnthonyWJones
fonte

2

non "," dovrebbe essere ";", nel corpo css?

— paynestrike

12

Prova CSS.

Se vuoi rimuovere Horizontal

overflow-x: hidden;

E se vuoi rimuovere Vertical

overflow-y: hidden;

— shafraz
fonte

10

Nelle versioni moderne di IE (IE10 e versioni successive), le barre di scorrimento possono essere nascoste utilizzando la -ms-overflow-styleproprietà .

html {
     -ms-overflow-style: none;
}

In Chrome, le barre di scorrimento possono avere uno stile:

::-webkit-scrollbar {
    display: none;
}

Ciò è molto utile se si desidera utilizzare lo scorrimento del corpo "predefinito" in un'applicazione Web, che è notevolmente più veloce di overflow-y: scroll.

— Lg102
fonte

solo questo ha funzionato per me da tutte le risposte :) grazie!

— Gediminas

9

Nel caso in cui sia necessario anche il supporto per Internet Explorer 6, è sufficiente eseguire l'overflow dell'html

$("html").css("overflow", "hidden");

e

$("html").css("overflow", "auto");

— Gawin
fonte

5

IE ha qualche bug con le barre di scorrimento. Quindi, se vuoi uno dei due, devi includere quanto segue per nascondere la barra di scorrimento orizzontale:

overflow-x: hidden;
overflow-y:scroll;

e per nascondere verticale:

overflow-y: hidden;
overflow-x: scroll;

— Zeeshan Ali
fonte

4

(Non posso ancora commentare, ma volevo condividere questo):

Il codice di Lyncee ha funzionato per me nel browser desktop. Tuttavia, su iPad (Chrome, iOS 9), l'applicazione si è bloccata. Per aggiustarlo, ho cambiato

document.documentElement.style.overflow = ...

per

document.body.style.overflow = ...

che ha risolto il mio problema.

— Erasmus Cedernaes
fonte

2

Perché Firefox ha una freccia tasto di scelta rapida, probabilmente si vuole mettere un <div>giro con stile CSS: overflow:hidden;.

— Qvcool
fonte

2

Utilizzando JQuery puoi disabilitare la barra di scorrimento con questo codice:

$('body').on({
    'mousewheel': function(e) {
        if (e.target.id == 'el') return;
        e.preventDefault();
        e.stopPropagation();
     }
});

Inoltre puoi abilitarlo di nuovo con questo codice:

 $('body').unbind('mousewheel');

— gtzinos
fonte