Тень от прокрутки над контентом с помощью чистого CSS

  1. Вы пробовали использовать различные библиотеки (react-scroll-shadow, scroll-shadow-element, use-scroll-shadow), но они не сработали?
  2. Вы даже пытались написать собственное решение, используя background-attachment, но и это не сработало, тень отображалась за элементами (конечно, потому что это фон, а не передний план).
  3. JS кажется крутым, но слишком тяжелым, и вы устали ловить ошибки с этим решением.

Здравствуйте, я знаю, что еще можно сделать:

4. Попробуйте использовать sticky.

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

Посмотрите здесь:

Как это сделать?

Все довольно просто, вы должны структурировать ваш прокручиваемый блок следующим образом:

/* Wrapper styles, sometimes you might need overflow-x-hidden */
<div style={{position: 'relative', overflow: 'overflow-y-auto'}}>
 /* Upper shadow block */
 <div style={{position: 'sticky', zIndex: '10', top: '-1px', 
 'linear-gradinet(to bottom, '#00000000' '#fff')'}} />

<p>Bunch of your content here</p>

 /* Bottom shadow block */
 <div style={{position: 'sticky', zIndex: '10', bottom: '-1px', 
 backgroundImage: 'linear-gradinet(to bottom, '#fff' 
 '#00000000')'}} />
</div>
Вход в полноэкранный режим Выход из полноэкранного режима

Фух, надеюсь, я не испортил часть стилизации, я не хочу включать файл .css, потому что вы лучше поймете код в одной табличке.

Удачи в создании отличных макетов 🙂

Оцените статью
devanswers.ru
Добавить комментарий