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

Несмотря на отключение полосы прокрутки с помощью переполнения: скрыто, функциональность прокрутки была потеряна. Для решения этой проблемы существует альтернативное решение, сочетающее в себе оболочку CSS с вычислениями JavaScript.

Решение на основе JavaScript и CSS

Используйте следующий код CSS и JavaScript:

#wrapper {
  overflow: hidden;
}

// Calculate the width of the element excluding the scrollbar
var elementWidth = document.getElementById("element").scrollWidth;

// Set the wrapper width to match the element width
document.getElementById("wrapper").style.width = elementWidth   "px";

Скрыв полосу прокрутки с помощью CSS и отрегулировав ширину оболочки так, чтобы она соответствовала фактической ширине содержимого, вы можете сохранить функцию прокрутки с помощью мыши или клавиатуру.

Дополнительная техника

Для создания прокручиваемого элемента div без видимой полосы прокрутки используйте тот же принцип. Просто добавьте overflow-y: Scroll; свойство внутреннего элемента.