순수한 CSS로 콘텐츠 위의 스크롤 그림자
안녕하세요. 무엇을 더 할 수 있는지 알고 있습니다.
4. 스티키를 사용해 보세요
이것은 스크롤 가능한 콘텐츠를 개발할 때 많은 도움이 되었습니다.
여기를 보세요:
이것을 하는 방법?
매우 간단합니다. 스크롤 가능한 블록을 다음과 같이 구성해야 합니다.
/* 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 파일을 포함하고 싶지 않습니다. 한 판에서 코드를 더 잘 이해할 수 있기 때문입니다.멋진 레이아웃을 만드는 행운을 빕니다 :)
Reference
이 문제에 관하여(순수한 CSS로 콘텐츠 위의 스크롤 그림자), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/tdamer/scroll-shadow-above-the-content-with-pure-css-41a3텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
