Отключить браузеры вертикальной и горизонтальной полос прокрутки - PullRequest
108 голосов
/ 28 октября 2008

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

Ответы [ 11 ]

141 голосов
/ 28 октября 2008

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

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

и

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

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

107 голосов
/ 30 мая 2012
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
}
47 голосов
/ 28 октября 2008

Попробуйте CSS

<body style="overflow: hidden">
31 голосов
/ 28 октября 2008

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

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

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

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

9 голосов
/ 14 декабря 2011

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

Если вы хотите удалить Горизонтальный

overflow-x: hidden;

А если хочешь убрать Вертикаль

overflow-y: hidden;
8 голосов
/ 27 декабря 2013

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

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

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

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

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

8 голосов
/ 06 августа 2010

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

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

и

$("html").css("overflow", "auto");
4 голосов
/ 25 сентября 2015

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

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

document.documentElement.style.overflow = ...

до

document.body.style.overflow = ...

которая решила мою проблему.

4 голосов
/ 18 апреля 2013

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

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

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

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

2 голосов
/ 08 мая 2016

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

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

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

 $('body').unbind('mousewheel');
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...