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

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
источник