Deaktivieren Sie die vertikalen und horizontalen Bildlaufleisten des Browsers

117

Ist es möglich, die vertikalen und horizontalen Bildlaufleisten des Browsers mit jQuery oder Javascript zu deaktivieren?

javascript jquery Naveen
quelle
Ich denke, in einigen Situationen, besonders wenn Sie zwischen Bildlauf und keinem Bildlauf
wechseln
Eine vollständigere Antwort auf diese Frage finden Sie hier stackoverflow.com/a/25561646/1922144
davidcondrey

Antworten:

144

Falls Sie die Möglichkeit benötigen, Bildlaufleisten dynamisch auszublenden und anzuzeigen, können Sie sie verwenden

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

und

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

irgendwo in deinem Code.

Alexander Prokofyev
quelle
4
Überlauf versteckt funktioniert nicht immer im IE. Siehe AnthonyWJones Antwort unten.
Tiago Almeida
4
oveflow: hiddenwird nichts auf Smartphones verhindern.
dvlden
In Chrome deaktiviert dies die Bildlaufleiste, ohne sie
auszublenden
120 
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
quelle
5
Zwei positive Stimmen sind bemerkenswert wenig, da sie die einzige reine Javascript-Antwort sind.
Fzs2
2
@HermannIngjaldsson: OP nach JavaScript oder jQuery-Lösung gefragt zu sehen und vor 4 Jahren eine jQuery-Lösung akzeptiert zu haben, macht nur Sinn. Ich sage nicht, dass die Antwort nicht gut ist, sondern nur das Offensichtliche über die niedrigeren Stimmen. +1 von mir sowieso.
Nein,
Dies ist die einzige Lösung, die für mich funktioniert hat, da der versteckte Überlauf des Körpers nicht das gesamte Dokument angreift. Dies ist die richtige Lösung für dieses Problem! Vielen Dank, du hast mir viel Zeit gespart!
Adnane.T
Dies ist eine brillante Lösung und verdient eine positive Bewertung. Es löst auch Probleme mit festem CSS, bei dem die Seite nach oben gescrollt wird.
Haipham23
50

Versuchen Sie es mit CSS

<body style="overflow: hidden">
Ray Lu
quelle
15
Aus Gründen der Browserkompatibilität würde ich diesen Stil auch dem HTML-Tag hinzufügen: html, body {overflow: hidden;}
Ady
32

Bisher haben wir Überlauf: am Körper versteckt. Der IE berücksichtigt dies jedoch nicht immer und Sie müssen scroll = "no" auch auf das body-Element setzen und / oder einen Überlauf platzieren: versteckt auch auf dem HTML-Element.

Sie können dies weiter vorantreiben, wenn Sie die Kontrolle über den Ansichtsport übernehmen müssen. Sie können dies tun: -

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

Ein Element, dem im Körper eine Höhe von 100% gewährt wurde, hat die volle Höhe des Fensteransichtsfensters, und das Element wird absolut mit dem unteren Rand positioniert: nnPX wird nn Pixel über dem unteren Rand des Fensters usw. festgelegt.

AnthonyWJones
quelle
2
Ist das nicht "," sollte ";" sein, im Körper CSS?
Paynestrike
12

Versuchen Sie es mit CSS.

Wenn Sie Horizontal entfernen möchten

overflow-x: hidden;

Und wenn Sie Vertical entfernen möchten

overflow-y: hidden;
Shafraz
quelle
10

In modernen Versionen von IE (IE10 und höher) können Bildlaufleisten mithilfe der -ms-overflow-styleEigenschaft ausgeblendet werden .

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

In Chrome können Bildlaufleisten wie folgt gestaltet werden:

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

Dies ist sehr nützlich, wenn Sie in einer Webanwendung den Standard-Bildlauf verwenden möchten, der erheblich schneller ist als overflow-y: scroll.

Lg102
quelle
nur das hat bei mir von allen antworten geklappt :) danke!
Gediminas
9

Wenn Sie auch Unterstützung für Internet Explorer 6 benötigen, überlaufen Sie einfach das HTML

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

und

$("html").css("overflow", "auto");
Gawin
quelle
5

IE hat einige Fehler mit den Bildlaufleisten. Wenn Sie also eine der beiden Optionen verwenden möchten, müssen Sie Folgendes einschließen, um die horizontale Bildlaufleiste auszublenden:

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

und vertikal zu verstecken:

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

Zeeshan Ali
quelle
4

(Ich kann noch keinen Kommentar abgeben, wollte dies aber teilen):

Lyncees Code funktionierte für mich im Desktop-Browser. Auf dem iPad (Chrome, iOS 9) stürzte die Anwendung jedoch ab. Um das Problem zu beheben, habe ich mich geändert

document.documentElement.style.overflow = ...

zu

document.body.style.overflow = ...

was mein Problem gelöst hat.

Erasmus Cedernaes
quelle
2

Da Firefox eine Verknüpfung mit der Pfeiltaste hat, möchten Sie diese wahrscheinlich <div>mit dem CSS-Stil umgehen : overflow:hidden;.

Qvcool
quelle
2

Mit JQuery können Sie die Bildlaufleiste mit folgendem Code deaktivieren: 

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

Sie können es auch mit diesem Code wieder aktivieren:

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