ОБНОВИТЬ:
Firefox теперь поддерживает скрытие полос прокрутки с помощью CSS, поэтому теперь доступны все основные браузеры (Chrome, Firefox, Internet Explorer, Safari и т. Д.).
Просто примените следующий CSS к элементу, из которого вы хотите удалить полосы прокрутки:
.container {
overflow-y: scroll;
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* Internet Explorer 10+ */
}
.container::-webkit-scrollbar { /* WebKit */
width: 0;
height: 0;
}
Это наименее хакерское кросс-браузерное решение, которое я знаю в настоящее время. Проверьте демо.
ОРИГИНАЛЬНЫЙ ОТВЕТ:
Вот еще один способ, который еще не был упомянут. Это действительно просто и включает в себя только два div и CSS. Не требуется JavaScript или проприетарный CSS, и он работает во всех браузерах. Также не требуется явно устанавливать ширину контейнера, что делает его жидким.
Этот метод использует отрицательное поле, чтобы переместить полосу прокрутки из родительского элемента, а затем то же количество отступов, чтобы вернуть содержимое в исходное положение. Техника работает для вертикальной, горизонтальной и двусторонней прокрутки.
Демонстрации:
Пример кода для вертикальной версии:
HTML:
<div class="parent">
<div class="child">
Your content.
</div>
</div>
CSS:
.parent {
width: 400px;
height: 200px;
border: 1px solid #AAA;
overflow: hidden;
}
.child {
height: 100%;
margin-right: -50px; /* Maximum width of scrollbar */
padding-right: 50px; /* Maximum width of scrollbar */
overflow-y: scroll;
}
!important
поэтому я удалил их все: jsfiddle.net/5GCsJ/954