Скрыть полосу прокрутки, но сохранить возможность прокрутки

В WebKit это делается достаточно просто, с использованием необязательного стиля:

html {
    overflow: scroll;
    overflow-x: hidden;
}
::-webkit-scrollbar {
    width: 0;  /* Убираем пространство для полосы прокрутки */
    background: transparent;  /* Необязательно: просто делаем полосу прокрутки невидимой */
}
/* Необязательно: показываем индикатор положения в красном цвете */
::-webkit-scrollbar-thumb {
    background: #FF0000;
}

Таким образом, вы сможете скрыть полосу прокрутки, оставив возможность прокрутки содержимого.

Вы можете использовать следующий код, чтобы скрыть ползуны прокрутки в веб-контенте:

::-webkit-scrollbar {
  width: 0px; /* Устанавливает ширину ползунка прокрутки в 0 пикселей */
}

или

::-webkit-scrollbar {
  display: none; /* Прячет ползунок прокрутки полностью */
}

Оба варианта работают для браузеров на основе WebKit (например, Chrome и Safari). Выберите тот, который лучше подходит для ваших нужд.

Для того чтобы скрыть полосу прокрутки, но сохранить её функциональность, вы можете использовать следующий код для WebKit-браузеров (таких как Chrome и Safari):

.example::-webkit-scrollbar {
  display: none;
}

Если вы хотите скрыть полосу прокрутки в Internet Explorer, Edge и Firefox, используйте следующий код:

.example {
  -ms-overflow-style: none;  /* Для IE и Edge */
  scrollbar-width: none;  /* Для Firefox */
}

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

Это решение работает для меня во всех браузерах. Однако оно не скрывает нативные полосы прокрутки в мобильных браузерах.

В SCSS:

.hide-native-scrollbar {
  scrollbar-width: none; /* Firefox 64 */
  -ms-overflow-style: none; /* Internet Explorer 11 */
  &::-webkit-scrollbar { /** WebKit */
    display: none;
  }
}

В CSS:

.hide-native-scrollbar {
  scrollbar-width: none; /* Firefox 64 */
  -ms-overflow-style: none; /* Internet Explorer 11 */
}
.hide-native-scrollbar::-webkit-scrollbar { /** WebKit */
  display: none;
}

Обратите внимание, что для мобильных браузеров, таких как Chrome на Android или Safari на iOS, это правило может не сработать, так как мобильные браузеры имеют свои собственные стили прокрутки. Рассмотрите возможность использования JavaScript или других подходов, если вам нужно добиться полного скрытия полос прокрутки на мобильных устройствах.

Просто используйте следующие три строки, и ваша проблема будет решена:

#liaddshapes::-webkit-scrollbar {
    width: 0 !important;
}

Где liaddshapes — это имя div, в котором появляется скролл.