Wyłącz pionowe i poziome paski przewijania w przeglądarkach

117

Czy można wyłączyć pionowe i poziome paski przewijania przeglądarki za pomocą jQuery lub javascript?

javascript jquery naveen
źródło
Myślę, że w niektórych sytuacjach szczególnie, jeśli chcesz przełączać się między przewijaniem a brakiem przewijania, to rozwiązanie jest bardziej preferowane: stackoverflow.com/questions/8701754/ ...
Yousef Salimpour
Pełniejszą

Odpowiedzi:

144

Jeśli potrzebujesz możliwości dynamicznego ukrywania i pokazywania pasków przewijania, możesz użyć

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

i

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

gdzieś w swoim kodzie.

Alexander Prokofyev
źródło
4
Ukryte przepełnienie nie zawsze działa w IE. Zobacz odpowiedź Anthony'ego WJones poniżej.
Tiago Almeida,
4
oveflow: hiddennic nie zapobiegnie na smartfonach.
dvlden,
W chrome wyłącza to pasek przewijania bez ukrywania go (wciąż tam jest i wciąż zmienia rozmiar wszystkiego innego, ale teraz jest wyszarzony)
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
źródło
5
Dwa głosy za to zadziwiająco mało, ponieważ jest to jedyna czysta odpowiedź javascript.
Fzs2
2
@HermannIngjaldsson: Widząc, że OP poprosił o rozwiązanie JavaScript lub jQuery i zaakceptował rozwiązanie jQuery 4 lata temu, ma sens. Nie mówię, że odpowiedź nie jest dobra, po prostu stwierdzam oczywistość dotyczącą niższych głosów. I tak +1 ode mnie.
Nie,
to jedyne rozwiązanie, które działało dla mnie, ponieważ ukryty przepełnienie treści nie atakuje całego dokumentu, to jest właściwe rozwiązanie tego problemu! wielkie dzięki, zaoszczędziłeś mi dużo czasu!
Adnane.T
To genialne rozwiązanie i zasługuje na pochwałę. Rozwiązuje również problem z naprawionym css, w którym strona będzie przewijana do góry.
haipham 23
50

Wypróbuj CSS

<body style="overflow: hidden">
Ray Lu
źródło
15
Ze względu na zgodność z przeglądarkami dodałbym również ten styl do tagu HTML: html, body {overflow: hidden;}
Ady
32

Póki co mamy przelew: ukryty na korpusie. Jednak IE nie zawsze to honoruje i musisz umieścić scroll = "no" również w elemencie body i / lub wstawić przepełnienie: ukryte również w elemencie html.

Możesz pójść dalej, gdy chcesz przejąć kontrolę nad portem widoku, możesz to zrobić: -

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

Element o nadanej wysokości 100% w treści ma pełną wysokość okna, a element pozycjonowany absolutnie za pomocą dołu: nnPX zostanie ustawiony nn pikseli nad dolną krawędzią okna itp.

AnthonyWJones
źródło
2
czy nie ',' powinno być ';', w css treści?
paynestrike
12

Wypróbuj CSS.

Jeśli chcesz usunąć Horizontal

overflow-x: hidden;

A jeśli chcesz usunąć Vertical

overflow-y: hidden;
shafraz
źródło
10

W nowoczesnych wersjach IE (IE10 i nowszych) paski przewijania można ukrywać za pomocą -ms-overflow-stylewłaściwości .

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

W przeglądarce Chrome paski przewijania można stylizować:

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

Jest to bardzo przydatne, jeśli chcesz użyć „domyślnego” przewijania treści w aplikacji internetowej, które jest znacznie szybsze niż overflow-y: scroll.

Lg102
źródło
tylko to zadziałało ze wszystkich odpowiedzi :) dzięki!
Gediminas
9

Jeśli potrzebujesz również obsługi przeglądarki Internet Explorer 6, po prostu przepełnij HTML

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

i

$("html").css("overflow", "auto");
Gawin
źródło
5

IE ma jakiś błąd związany z paskami przewijania. Więc jeśli chcesz jedno z dwóch, musisz uwzględnić następujące elementy, aby ukryć poziomy pasek przewijania:

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

i aby ukryć pion:

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

Zeeshan Ali
źródło
4

(Nie mogę jeszcze komentować, ale chcę to udostępnić):

Kod Lyncee działał dla mnie w przeglądarce na komputerze. Jednak na iPadzie (Chrome, iOS 9) zawiesił aplikację. Aby to naprawić, zmieniłem się

document.documentElement.style.overflow = ...

do

document.body.style.overflow = ...

co rozwiązało mój problem.

Erasmus Cedernaes
źródło
2

Ponieważ Firefox posiada klawisz strzałki skróty, prawdopodobnie chcesz umieścić <div>wokół niego ze stylem CSS overflow:hidden;.

Qvcool
źródło
2

Za pomocą JQuery możesz wyłączyć pasek przewijania za pomocą tego kodu: 

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

Możesz również włączyć go ponownie za pomocą tego kodu:

 $('body').unbind('mousewheel');
gtzinos
źródło