Локальный CSS-фон вложения и проблема нижнего положения с Edge / IE - PullRequest
Новая
       43

Локальный CSS-фон вложения и проблема нижнего положения с Edge / IE

0 голосов
/ 18 февраля 2019

Я пытаюсь показать градиент в конце прокручиваемого содержимого, используя линейный градиент с 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: center в среде прокрутки

В этом коде должен отображаться прямоугольник спереполненный контент, который показывает градиент только при прокрутке до конца контента.В IE / Edge градиент уже показывает загрузку страницы в середине содержимого.И при прокрутке он прокручивает содержимое.Очень некрасиво и определенно не предназначено.

Здесь также есть несколько кодов, с которыми можно поиграть.

https://codepen.io/yesman82/pen/KJbrLo

...