Локальный CSS-фон вложения и проблема нижнего положения с Edge/IE
Я пытаюсь показать градиент в конце прокрутки содержимого с помощью линейного градиента с background-position: bottom а также background-attachment: local, Это прекрасно работает во всех браузерах, кроме IE и Edge. Я мог бы просто принять это как есть, если бы везде не говорилось, что эта функция полностью разработана.
Я просто не могу найти никакого решения. Предполагается, что так будет работать, но, очевидно, нет. Я что-то упустил, но я не знаю что.
Важно, чтобы содержимое оставалось вертикально центрированным, если оно меньше, чем родительский, и градиент прокрутки работает в любом случае (большой / маленький контент и любая позиция прокрутки).
.scrollContent {
display: flex;
width: 200px;
height: 200px;
overflow-y: auto;
background-image: linear-gradient(transparent, white 80%), radial-gradient(farthest-side at 50% 100%, rgba(0,0,0,.2), rgba(0,0,0,0));
background-position: bottom;
background-size: 100% 40px, 100% 10px;
background-repeat: no-repeat;
background-attachment: local, scroll;
}
.vcenter {
flex-grow: 1;
margin: auto;
}<div class="scrollContent">
<div class="vcenter">
Scroll first <br>Scroll <br>Scroll <br>Scroll <br> Scroll <br>Scroll <br>Scroll <br> Scroll <br>Scroll <br>Scroll <br> Scroll <br>Scroll <br>Scroll <br>Scroll <br>Scroll last
</div>
</div>margin: auto Вертикальные центры сгибаются лучше, чем align-items: центр в среде прокрутки
В этом коде должно отображаться поле с переполненным содержимым, которое показывает градиент только при прокрутке до конца содержимого. В IE/Edge градиент уже показывает загрузку страницы в середине содержимого. И при прокрутке он прокручивает содержимое. Очень некрасиво и определенно не предназначено.
Здесь также есть несколько кодов, с которыми можно поиграть.