호버에 스크롤 바

웹 스크롤 막대의 설계는 사용자 경험과 접근성을 모두 고려해야합니다. 일반적으로 영역을 스크롤 해야하는 경우 스크롤 막대를 표시해야합니다. 그러나 온라인 세계는 끊임없이 변화하고 있으며 일부 영리한 기술은 사용자 경험을 향상시킬 수 있습니다. 이 기사에서는 스크롤 바를 기본적으로 숨기고 마우스가 호버링 될 때만 표시하는 방법을 소개합니다.

이 방법은 Thomas Gladdines에 의해 제안되었으며 내 테스트에서 Chrome, Firefox 및 Safari 브라우저에서 잘 작동했으며 MacOS 시스템 설정의 영향을받지 않으며 호환성이 우수합니다.

핵심 원칙은 스크롤 막대를 덮기 위해 마스크 레이어를 사용하는 것입니다. 스크롤 바와 정확히 같은 너비 인 마스크 층을 만들면 (너비가 17px라고 가정하면, 실제 너비를 스크립트로 계산해야 할 수 있음) 충분한 높이를 설정하면 스크롤 바를 완벽하게 숨길 수 있습니다. 마스크 레이어 위치의 애니메이션을 전환하여 점차적으로 떠오르는 효과를 시뮬레이션 할 수도 있습니다.

이것은 가짜 스크롤 바가 아닌 요소의 기본 스크롤 바를 지칭한다는 점은 주목할 가치가 있습니다. 스크롤 바를 단조하는 것도 실현 가능한 솔루션입니다. Ben Nadel은 한 번 슬랙이 구현되는 방법을 소개했습니다. 슬랙의 방법은 스크롤 바를 overflow 로 속성에 숨겨진 영역으로 렌더링 한 다음 가상 스크롤 바를 만들어 기본 스크롤 바를 시뮬레이션하여 스크롤 바를 더 많이 제어 할 수 있습니다. 이것은 스크롤 바를 렌더링하는 것과는 다른 접근법입니다. 또한이 접근 방식은 스크롤 바의 너비를 정확하게 지정하는 것과 같은 몇 가지 이점이있을 수있는 스크롤 바를 스타일링하는 것을 방해하지 않습니다.

1. 이 글을 쓰는 시점에서 MacOS의 지시 사항은 다음과 같습니다. "장치가 제스처 작업을 지원하면 스크롤을 시작하기 전에 스크롤 막대가 숨겨집니다. 그렇지 않으면 표시됩니다."

위 내용은 호버에 스크롤 바의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!