Отключить в браузерах вертикальные и горизонтальные полосы прокрутки

117

Можно ли отключить вертикальную и горизонтальную полосы прокрутки браузеров с помощью jQuery или javascript?

javascript jquery Нэвин
источник
Я думаю, что в некоторых ситуациях, особенно если вы хотите переключаться между прокруткой и без прокрутки, это решение более предпочтительно: stackoverflow.com/questions/8701754/…
Юсеф Салимпур,
Вы можете найти более полный ответ на этот вопрос здесь stackoverflow.com/a/25561646/1922144
davidcondrey

Ответы:

144

Если вам нужна возможность динамически скрывать и показывать полосы прокрутки, вы можете использовать

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

и

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

где-то в вашем коде.

Александр Прокофьев
источник
4
Скрытое переполнение не всегда работает в IE. См. Ответ AnthonyWJones ниже.
Tiago Almeida
4
oveflow: hiddenна смартфонах ничего не помешает.
dvlden
В хроме это отключает полосу прокрутки, не скрывая ее (она все еще там и все еще меняет размер всего остального, но теперь она неактивна)
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
источник
5
Два положительных голоса - это очень мало для того, чтобы быть единственным чистым ответом на javascript.
Fzs2
2
@HermannIngjaldsson: Видя, что OP запросил решение для JavaScript или jQuery и принял решение jQuery 4 года назад, это имеет смысл. Я не говорю, что ответ плохой, просто констатирую очевидное о более низких голосах. +1 от меня все равно.
Нет,
это единственное решение, которое сработало для меня, поскольку скрытое переполнение тела не атакует весь документ, это правильное решение этой проблемы! Большое спасибо, вы сэкономили мне много времени!
Adnane.T
Это отличное решение, заслуживающее поддержки. Это также решает проблему с фиксированным CSS, когда страница будет прокручиваться вверх.
haipham23
50

Попробуйте CSS

<body style="overflow: hidden">
Рэй Лу
источник
15
Для совместимости с браузером я бы также добавил этот стиль в тег HTML: html, body {overflow: hidden;}
Ади,
32

Пока что у нас есть overflow: hidden на теле. Однако IE не всегда соблюдает это, и вам нужно также поставить scroll = "no" в элемент body и / или поместить overflow: hidden в элемент html.

Вы можете пойти дальше, когда вам нужно «взять под контроль» порт просмотра, вы можете сделать это: -

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

Элемент, которому предоставлена ​​высота 100% в теле, имеет полную высоту окна просмотра, а элемент позиционируется абсолютно с использованием bottom: nnPX будет установлен на nn пикселей выше нижнего края окна и т. Д.

AnthonyWJones
источник
2
Разве ',' не должно быть ';' в теле css?
paynestrike
12

Попробуйте CSS.

Если вы хотите удалить Horizontal

overflow-x: hidden;

И если вы хотите удалить Vertical

overflow-y: hidden;
shafraz
источник
10

В современных версиях IE (IE10 и выше) полосы прокрутки можно скрыть с помощью -ms-overflow-styleсвойства .

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

В Chrome полосы прокрутки можно стилизовать:

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

Это очень полезно, если вы хотите использовать прокрутку тела по умолчанию в веб-приложении, которая значительно быстрее, чем overflow-y: scroll.

Lg102
источник
только это сработало для меня из всех ответов :) спасибо!
Гедиминас
9

Если вам также нужна поддержка Internet Explorer 6, просто переполните html

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

и

$("html").css("overflow", "auto");
Гавин
источник
5

В IE есть ошибка с полосами прокрутки. Поэтому, если вам нужен любой из двух, вы должны включить следующее, чтобы скрыть горизонтальную полосу прокрутки:

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

и скрыть вертикаль:

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

Зишан Али
источник
4

(Пока не могу комментировать, но хотел бы этим поделиться):

Код Lyncee работал у меня в настольном браузере. Однако на iPad (Chrome, iOS 9) произошло сбой приложения. Чтобы исправить это, я изменил

document.documentElement.style.overflow = ...

в

document.body.style.overflow = ...

который решил мою проблему.

Эразм Седернаес
источник
2

Поскольку Firefox имеет стрелку ключ кратчайших, вы , вероятно , хотите поставить <div>вокруг него со стилем CSS: overflow:hidden;.

Qvcool
источник
2

Используя JQuery, вы можете отключить полосу прокрутки с помощью этого кода: 

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

Также вы можете снова включить его с помощью этого кода:

 $('body').unbind('mousewheel');
gtzinos
источник