Отключить браузеры вертикальной и горизонтальной полос прокрутки
Можно ли отключить браузеры вертикальной и горизонтальной полос прокрутки с помощью 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
}
Пока что мы переполнены: спрятаны на теле. Однако 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');