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ą

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