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

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

11 ответов

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

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

а также

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

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

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
}

Попробуй CSS

<body style="overflow: hidden">

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

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

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

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

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

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

overflow-x: hidden;

И если вы хотите удалить вертикальный

overflow-y: hidden;

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

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

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

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

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

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

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

а также

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

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

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

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

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

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

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

document.documentElement.style.overflow = ...

в

document.body.style.overflow = ...

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

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

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

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

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

 $('body').unbind('mousewheel');
Другие вопросы по тегам