Как скрыть вертикальную и горизонтальную полосы прокрутки для блока 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

Приведенный ниже скрипт позволяет  скрыть полосу прокрутки (скролл) последовательно во всех браузерах. Это достигается следующим образом:

  1. Этот скрипт принудительно включает полосу прокрутки для элемента с помощью CSS overflow-x:scroll;
  2. Затем вычисляется ширина полосы прокрутки;
  3. Рассчитанная ширина устанавливается как отрицательный отступ для внешнего элемента. Это эффективно скрывает полосу прокрутки во всех браузерах.

_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); }

 

Перевод статьи «HIDE VERTICAL & HORIZONTAL SCROLLBAR OF A DIV» был подготовлен дружной командой проекта Сайтостроение от А до Я