Отключить в браузерах вертикальные и горизонтальные полосы прокрутки
Можно ли отключить вертикальные и горизонтальные полосы прокрутки в браузерах с помощью jQuery или javascript?
Более полный ответ на этот вопрос вы можете найти здесь stackoverflow.com/a/25561646/1922144
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 11
Попробуйте CSS
<body style = "overflow: hidden">
Для совместимости с браузером я бы также добавил этот стиль в тег HTML: html, body {overflow: hidden;}
Если вам нужна возможность динамически скрывать и показывать полосы прокрутки, вы можете использовать
$("body").css("overflow", "hidden");
и
$("body").css("overflow", "auto");
где-то в вашем коде.
Скрытое переполнение не всегда работает в IE. См. Ответ AnthonyWJones ниже.
oveflow: hidden ничего не помешает на смартфонах.
В Chrome это отключает полосу прокрутки, не скрывая ее (она все еще там и все еще меняет размер всего остального, но теперь она неактивна)
Пока что у нас есть 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 пикселей выше нижнего края окна и т. д.
Разве ',' не должно быть ';' в теле css?
Если вам также нужна поддержка Internet Explorer 6, просто переполните html
$("html").css("overflow", "hidden");
и
$("html").css("overflow", "auto");
Попробуйте CSS.
Если вы хотите удалить Horizontal
overflow-x: hidden;
И если вы хотите удалить Vertical
overflow-y: hidden;
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
}
Два положительных голоса - это очень мало для того, чтобы быть единственным чистым ответом на javascript.
@HermannIngjaldsson: Видя, что OP запросил решение JavaScript или jQuery и принял решение jQuery 4 года назад, это имеет смысл. Я не говорю, что ответ плохой, просто констатирую очевидное о более низких голосах. +1 от меня все равно.
это единственное решение, которое сработало для меня, поскольку скрытое переполнение тела не атакует весь документ, это правильное решение этой проблемы! Большое спасибо, вы сэкономили мне много времени!
Это отличное решение, заслуживающее поддержки. Это также решает проблему с фиксированным CSS, когда страница будет прокручиваться вверх.
В IE есть ошибка с полосами прокрутки. Поэтому, если вы хотите использовать одно из двух, вы должны включить следующее, чтобы скрыть горизонтальную полосу прокрутки:
overflow-x: hidden;overflow-y:scroll;
и скрыть вертикаль:
overflow-y: hidden;overflow-x: scroll;
Поскольку Firefox имеет сокращенную клавишу со стрелкой, вы, вероятно, захотите поместить вокруг него <div> в стиле CSS: overflow:hidden;.
В современных версиях IE (IE10 и выше) полосы прокрутки можно скрыть с помощью -ms-overflow-style недвижимость.
html {
-ms-overflow-style: none;
}
В Chrome полосы прокрутки можно стилизовать:
::-webkit-scrollbar {
display: none;
}
Это очень полезно, если вы хотите использовать прокрутку тела по умолчанию в веб-приложении, которая значительно быстрее, чем overflow-y: scroll.
только это сработало для меня из всех ответов :) спасибо!
(Пока не могу комментировать, но хотел бы этим поделиться):
Код Lyncee работал у меня в настольном браузере. Однако на iPad (Chrome, iOS 9) он вылетал из приложения. Чтобы исправить это, я изменил
document.documentElement.style.overflow = ...
к
document.body.style.overflow = ...
который решил мою проблему.
Используя JQuery, вы можете отключить полосу прокрутки с помощью этого кода:
$('body').on({
'mousewheel': function(e) {
if (e.target.id == 'el') return;
e.preventDefault();
e.stopPropagation();
}
});
Также вы можете снова включить его с помощью этого кода:
$('body').unbind('mousewheel');
Я думаю, что в некоторых ситуациях, особенно если вы хотите переключаться между прокруткой и без прокрутки, это решение более предпочтительно: stackoverflow.com/questions/8701754/…