JavaScript로 그림자를 스크롤합니다

스크롤링 그림자는 좋은 사용자 경험 디자인이며, 작은 내부 그림자는 요소가 스크롤 할 수있을 때만 표시됩니다. 놀랍게도, 이것은 CSS로 달성 될 수 있으며 CSS 기술의 예입니다. 그러나… iOS 사파리에서는 작동하지 않습니다. 그것은 효과가 있었지만 iOS 13과 그 이유에 대한 설명없이 iOS 13과 다른 유용한 CSS 기능에서는 실패했지만 수정되지 않았지만 현재는 2022 년 7 월에 수정되었습니다 (Ronald 덕분에).

다음은 모든 브라우저에서 그 효과를 볼 수있는 순수한 CSS 예입니다. 스크린 샷은 다음과 같습니다. (스크린 샷을 여기에 삽입해야합니다)

Jonnie Hallman이 블로그에서 다시 언급하는 것을 보았 기 때문에 지금이 질문을하고 있습니다. 그는 5 월에 그것을 큰 세부 사항으로 언급했습니다. 일부 인터페이스에서는 그림자를 스크롤하는 것이 의미 가 있습니다 .

되돌아 보면, 스크롤 이벤트를 사용하여 현재 작동하는 솔루션을 생각했습니다. 스크롤 영역이 스크롤 된 경우 상단 및 왼쪽 그림자가 표시됩니다. 스크롤 영역이 완전히 스크롤되지 않으면 바닥과 오른쪽 그림자가 표시됩니다. 이것을 염두에두고, 나는 가장 쉽고, 가장 직접적이며, 가장 영리한 접근 방식을 시도했는데,이 접근법은 스크롤 영역의 상단, 오른쪽, 하단 및 왼쪽에 빈 DIV를 배치하는 것입니다. 나는 이것을 "가장자리"라고 부르며 교차로 관찰자 API를 사용하여 관찰합니다. 가장자리가 스크롤 영역과 교차하지 않으면 모서리가 스크롤되었고 그 가장자리의 그림자가 표시 될 수 있다고 가정 할 수 있습니다. 그런 다음 가장자리가 교차하면 스크롤 영역이 스크롤의 가장자리에 도달했다고 가정 할 수 있으므로 그 그림자를 숨길 수 있습니다.

영리한! 불행히도 온라인 데모는 없지만 구현에 대한 자세한 내용은 기사를 읽으십시오.

다른 JavaScript 기반 예제

그러나 나는 당신이 이것을하고 싶다면, 당신은 intersectionObserver 메소드를 선택해야한다고 생각합니다. 바라건대, 누군가 가이 아이디어의 가장 좋은 부분을 모으는 것을 볼 수 있습니다 (힌트).

위 내용은 JavaScript로 그림자를 스크롤합니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!