3 способа реализации CSS скрытия полосы прокрутки и прокрутки содержимого

Способ 1: рассчитать ширину полосы прокрутки и скрыть ее

существуетБлог о фронтенд-разработкеНа боковой панели вы можете видеть, что у внешнего ежедневного контента нет полосы прокрутки, но вы можете прокручивать контент, наведя на него указатель мыши. Что это за технология? На самом деле я просто скрываю полосу прокрутки, позиционируя ее.

демо

Ниже приведен упрощенный вариант кода


<div class="outer-container">
    <div class="inner-container">
    	......
    </div>
</div>


.outer-container{
	width: 360px;
	height: 200px;
	position: relative;
	overflow: hidden;
}
.inner-container{
	position: absolute;
	left: 0;
	top: 0;
	right: -17px;
	bottom: 0;
	overflow-x: hidden;
	overflow-y: scroll;
}

демо

Этот код незаметно перемещает 17 пикселей вправо, что в точности равно ширине полосы прокрутки. Это значение было отлажено мной вручную. В хроме и IE проблем не обнаружено.

Способ 2: окружить тремя контейнерами, не нужно рассчитывать ширину полосы прокрутки

Код был первымMicrosoftТо, что я видел в блоге, похоже на идею выше, за исключением того, что было добавлено еще одно поле, чтобы ограничить содержимое полем. Таким образом, вы не видите полосу прокрутки, но можете прокручивать ее одновременно.

код показывает, как показано ниже:

 <div class="outer-container">
     <div class="inner-container">
        <div class="content">
            ......
        </div>
     </div>
 </div>

.element, .outer-container {
  width: 200px;
  height: 200px;
}

.outer-container {
  border: 5px solid purple;
  position: relative;
  overflow: hidden;
}

.inner-container {
  position: absolute;
  left: 0;
  overflow-x: hidden;
  overflow-y: scroll;
}

.inner-container::-webkit-scrollbar {
  display: none;
}

демо

Способ 3: css скрыть полосу прокрутки

В то же время в статье также был описан метод скрытия полосы прокрутки через CSS, но этот метод несовместим с IE и может использоваться для мобильных приложений.

Это селектор псевдообъектов для пользовательских полос прокрутки::-webkit-scrollbar

хром и сафари

.element::-webkit-scrollbar { width: 0 !important }

IE 10+

.element { -ms-overflow-style: none; }

Firefox

.element { overflow: -moz-scrollbars-none; }

демо

Категории