Отключить вертикальную полосу прокрутки при переполнении div: авто

113

Можно ли разрешить только горизонтальную полосу прокрутки при использовании overflow: auto (или scroll)?

— Joedborg
источник

Обратите внимание, что margin-bottomс отрицательным значением будет связываться overflow-y: hiddenи т. Д.

— Эндрю

232

Эти два свойства CSS можно использовать для скрытия полос прокрутки:

overflow-y: hidden; // hide vertical
overflow-x: hidden; // hide horizontal

— Люк
источник

@Coulton А как насчет сафари и хрома?

— QMaster

В соответствии с этим он работает в Safari, и я знаю, что он работает в Chrome.

— Люк

3

Стоит упомянуть, что вы все еще можете прокручивать в div, используя tabпри условии, что в скрытом переполнении есть ссылки или элементы ввода

— Уильям Брохманн,

40

Вы должны использовать только

overflow-y:hidden; - Используйте это, чтобы скрыть вертикальную прокрутку

overflow-x:auto; - Используйте это, чтобы показать горизонтальную прокрутку

Люк упомянул, что оба скрыты. поэтому я привел это отдельно.

— Шива Чаран
источник

21

перелив: авто;
переполнение-y: скрыто;

Для IE8: -ms-overflow-y: hidden;

Или еще:

Чтобы скрыть X :

<div style="height:150x; width:450px; overflow-x:hidden; overflow-y: scroll; padding-bottom:10px;"></div>

Чтобы скрыть Y :

<div style="height:150px; width:450px; overflow-x:scroll ; overflow-y: hidden; padding-bottom:10px;"></div>

— Случайный парень
источник

8

Если вы хотите сделать то же самое в Gecko (NS6 +, Mozilla и т.д.) и IE4 + одновременно, я считаю, что это должно помочь: V

body {
overflow: -moz-scrollbars-vertical;
overflow-x: hidden;
overflow-y: auto;
}

Это будет применено ко всему тегу тела, пожалуйста, обновите его до соответствующего CSS и примените эти свойства.

— Нирав Мехта
источник

2

Добавьте следующее:

body{
overflow-y:hidden;
}

— Зейнаб
источник

1

Эти правила совместимы со всеми браузерами:

body {overflow: hidden; }
body::-webkit-scrollbar { width: 0 !important; }
body { overflow: -moz-scrollbars-none; }
body { -ms-overflow-style: none; }

— Тамуэка
источник

1

Как насчет стенографической записи?

{overflow: auto hidden;}

— Чонг Губ Панг
источник

0

если вы хотите отключить полосу прокрутки, но все еще можете прокручивать содержимое внутреннего DIV, используйте приведенный ниже код в css,

.divHideScroll::-webkit-scrollbar {
    width: 0 !important
}
.divHideScroll {
    overflow: -moz-scrollbars-none;
}
.divHideScroll {
    -ms-overflow-style: none;
}

divHideScroll - это имя класса целевого div.

Он будет работать во всех основных браузерах (Chrome, Safari, Mozilla, Opera и IE).

— Тахир Алви
источник