Как скрыть вертикальную и горизонтальную полосы прокрутки для блока 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» , подготовленной дружной командой проекта Интернет-технологии.ру