Как скрыть вертикальную и горизонтальную полосы прокрутки для блока div
Полосы прокрутки эффективны и необходимы для контроля общей высоты или ширины страницы. Они позволяет получить доступ к содержимому блока DIV, которое выходит за его пределы, либо с помощью прокрутки, либо с помощью функции панорамирования.
По умолчанию стилизация для полос прокрутки (скролла) определяются браузером, а не темой оформления вашего сайта. Поэтому их использование без дополнительной обработки может привести к результату, который будет выглядеть странно.
Браузеры на основе Webkit, такие как Chrome, Safari и т. д., предоставляют псевдоселектор для настройки цвета и размера полос прокрутки в соответствии с настройками сайта.
Вы можете убрать полосу прокрутки (скролл), используя следующий фрагмент CSS- кода:
.__sb-test::-webkit-scrollbar { width: 0px; }Поскольку этот CSS-селектор специфичен для webkit-браузеров, мы должны создать резервный вариант для достижения такого же эффекта в других браузерах, таких как Firefox, IE, Edge и т.д.
Возможное решение для создания скролла на чистом CSS:
<div class="outer">
<div class="inner">
This is very lengthy statement that will wrap. This is very lengthy statement that will wrap and show scroll
</class>
</div>
.outer{
min-height:200px;
width:200px;
overflow:hidden;
}
.inner{
whitespace:nowrap;
padding-right:17px;
width:100%;
}Приведенный выше CSS-код позволяет убрать вертикальный скролл, но у этого способа есть один недостаток - в разных браузерах будет разная ширина / размер полос прокрутки. Поэтому нельзя статически указать их. Таким образом, нам нужно адаптировать данную концепцию и прописать динамическое определение высоты прокрутки с помощью JavaScript.
Решение на основе JS
Приведенный ниже скрипт позволяет скрыть полосу прокрутки (скролл) последовательно во всех браузерах. Это достигается следующим образом:
- Этот скрипт принудительно включает полосу прокрутки для элемента с помощью CSS overflow-x:scroll;
- Затем вычисляется ширина полосы прокрутки;
- Рассчитанная ширина устанавливается как отрицательный отступ для внешнего элемента. Это эффективно скрывает полосу прокрутки во всех браузерах.
_findScrollbarWidth() {
let parent: JQuery<HTMLElement>;
let child: JQuery<HTMLElement>;
if (this.sbarWidth === null) {
const style = document.createElement('style');
style.innerHTML = '.__sb-test::-webkit-scrollbar { width: 0px; }';
document.body.appendChild(style);
parent = $('<div class="__sb-test" style="width:50px;height:50px;overflow:auto;">' +
'<div/></div>')
.appendTo('body');
child = parent.children();
this.sbarWidth = child.innerWidth() - child.height(99).innerWidth();
// очистка
parent.remove();
document.body.removeChild(style);
}
}
_hideScrollBars() {
this._findScrollbarWidth();
this.$innerWrapper.css('margin-bottom', -1 * this.sbarWidth);
}