Почему overlay не отображается при использовании свойства overflow?

Каким образом можно реализовать скролл поверх контента без изменения его размера? Пробовал использовать свойство `overlay`, но оно, по-видимому, не работает или устарело. Есть ли другие альтернативы или возможные способы исправления?
  • 14 октября 2023 г. 18:31
Ответы на вопрос 2
Свойство "overlay" для значения "overflow" действительно не существует. "Overflow" определяет, как должен вести себя контейнер, когда его содержимое выходит за границы. 

Если вы хотите реализовать скролл поверх контента без изменения его размера, вы можете использовать следующий подход:

1. Создайте контейнер, в котором будет находиться ваш контент.
2. Задайте для контейнера значение "position: relative" или "position: absolute", чтобы иметь возможность использовать позиционирование его потомков.
3. Создайте внутри контейнера еще один элемент, который будет служить оверлеем. Этот элемент должен иметь значение "position: absolute", чтобы находиться над контентом.
4. Оверлей должен иметь свойство "overflow: auto", чтобы можно было прокручивать его содержимое, если оно больше размеров оверлея.
5. Если необходимо, задайте оверлею размеры с помощью свойств "width" и "height".
6. Расположите контент внутри контейнера и оверлея с помощью позиционирования или других методов (например, flexbox или grid).

Пример кода:

```html
<div class="container">
  <div class="overlay">
    <!-- Сюда добавьте контент, который будет иметь скролл -->
  </div>
  <!-- Сюда добавьте остальной контент -->
</div>
```

```css
.container {
  position: relative;
  /* Добавьте здесь остальные стили контейнера */
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  /* Добавьте здесь остальные стили оверлея */
}
```

Этот подход позволит вам создать оверлей, который будет скрывать содержимое контейнера, и при необходимости вы сможете прокрутить его содержимое без изменения размеров контента внутри контейнера.
Это значение изначально было доступно только для вебкитов и не являлось стандартным. В последующих версиях хромиума оно было объявлено устаревшим и теперь ведет себя так же, как и значение "auto". Если вам необходимо заменить его, вы можете использовать пользовательскую реализацию скроллбаров на языке JavaScript. Однако, стоит отметить, что такое решение будет менее надежным по сравнению с нативными возможностями.
Похожие вопросы