Сделайте липкие элементы, которые «отклеены», как только содержимое прокрутки контейнера закончится? ⇐ CSS

[Anonymous]

Я строю макет в чате в React. Каждая сторона сообщений содержит:
horizontalresponseoptions: фиксированная высота, никогда не переполняет. /> horizontalResponseOptions оставаться видимым (как липкий заголовок).
Содержание внутреннего ответа для автоматического прокрутки, , не требуя, чтобы пользователь полностью его зависал. /> он должен работать гладко в обоих направлениях. < /p>
Пример код: < /p>

{pairs.map(p => (



{p.text}

))}


< /code>
Я возился со многими вариантами, но не мог достичь этого нативным способом, ни использованием recsectionobservers и похищения прокрутки. (Max-height, Overflow-y: Auto).
[*] Желаемое поведение прокрутки:
[*] Когда пользователь прокручивает внешний гибкость, вход колеса/сенсорного прикосновения должен быть перехвачен и применен к видимому в данный момент ответе (не требуется в ответ и фокусируется на ответе). HorizontalResponseOpions остается видимым (липкое поведение).
Когда ответ достигает своей границы (верхняя/внизу), оставшаяся дельта -прокрутки должна распространяться на внешний контейнер, чтобы раскрыть предыдущие/следующие сообщения. /> Любая помощь ценится! < /p>

Подробнее здесь: https://stackoverflow.com/questions/797 ... -container