Переполнение: прокрутка заставляет контейнер скрывать переполнение. Как обойти это? - PullRequest
Новая
       2

Переполнение: прокрутка заставляет контейнер скрывать переполнение. Как обойти это?

1 голос
/ 12 июля 2020

В моем приложении у меня есть контейнер прокрутки, который содержит несколько изображений в сетке. Когда изображение наведено, оно перемещает изображение вверх, показывая, какое из них наведено. Эта функция отлично работает в средних рядах, но в самом верхнем ряду изображения обрезаются, и это раздражает глаза. Я просмотрел столько вариантов вопроса, сколько мог, но смог найти только другие проблемы, связанные с overflow: scroll, а не с этой c one. Я попытался обернуть изображения во внутренний контейнер и установить видимое переполнение внутреннего контейнера, но это не сработало. Я также попытался установить z-index для изображений выше контейнера, но, как и ожидалось, это тоже не сработало.

Я воссоздал проблему в коде, чтобы продемонстрировать, о чем я говорю .

https://codepen.io/machetetwins/pen/abdKrOx

 body {
  background: rgb(44, 44, 44);
}

.outer {
  border: 3px solid red;
  margin: 0 auto 0 auto;
  width: 500px;
  height: 500px;
  overflow-y: scroll;
}

.no-scroll {
  border: 3px solid green;
  overflow-y: visible;
  margin-top: 2em;
}

.outer img {
  width: 100%;
  height: 100%;
  position: relative;
  cursor: pointer;
}

.outer img:hover {
  bottom: 2em;
}

```
<div class="outer">
  <img src="https://static.boredpanda.com/blog/wp-content/uploads/2017/12/funny-weird-wtf-stock-photos-18-5a39260c08f8a__700.jpg" />
</div>

<div class="outer no-scroll">
  <img src="https://static.boredpanda.com/blog/wp-content/uploads/2017/12/funny-weird-wtf-stock-photos-18-5a39260c08f8a__700.jpg" />
</div>

Нижнее изображение при наведении показывает желаемое поведение, но верхнее изображение внутри контейнера прокрутки зажимается.

...