0 ∞

Как скрыть полосы прокрутки у блока div

Полосы прокрутки на элементе div часто нарушают дизайн, но отключение их приводит к потере навигации внутри блока. Разбор включает конкретные CSS‑приёмы (overflow, псевдо‑скроллы, -webkit‑scrollbar), кроссбраузерные хаки и JavaScript‑обёртки с примерами для разных браузеров и кейсов.

Вы освоите вариант с сохранённой прокруткой и скрытым визуальным скроллом. В результате получите готовые сниппеты и инструкции для внедрения одного решения в проект и проверки совместимости на основных браузерах.

Стилизация полос прокрутки

По умолчанию стилизация для полос прокрутки (скролла) определяются браузером, а не темой оформления вашего сайта. Поэтому их использование без дополнительной обработки может привести к результату, который будет выглядеть странно.

Браузеры на основе 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);
}

Вадим Дворниковавтор-переводчик статьи «HIDE VERTICAL & HORIZONTAL SCROLLBAR OF A DIV»

Как скрыть полосы прокрутки у блока div

Стилизация полос прокрутки

Решение на основе JS

Комментарии