버튼에 대한 드롭다운을 만들고 선택했지만 오버플로 숨김으로 인해 차단된 적이 있습니까?

그럼 어떻게 하시나요? 그러면 자바스크립트를 사용하여 요소를 DOM의 루트에 던진 다음 트리거 요소 렉트를 기반으로 요소를 배치하고 레이아웃이 변경될 때마다 다시 계산하며 스크롤 및 크기 조정 창이 발생합니다. 효과적인.

아직 완전히 지원되지는 않지만 지금은 이를 해결하기 위한 폴리필이 있다는 점부터 말씀드리고 싶습니다.

우리가 의존할 두 가지 주요 기능은

앵커 위치 지정

팝오버

그래서 대화 상자가 DOM 레이어와 함께 루트로 전송되는 것을 보고 처음 아이디어를 얻었습니다. 나는 기본적으로 동일한 논리를 갖지만 약간 다르게 작동하는 팝오버 API를 우연히 발견했습니다.

범위 슬라이더의 엄지손가락에 요소를 고정하는 방법에 대한 게시물을 본 기억도 있습니다.

그런 다음 기본적으로 두 가지를 혼합하면 과도한 자바스크립트가 필요하지 않은 오버플로 숨김을 해제해야 하는 드롭다운/툴팁 등에 대해 기본적으로 무엇을 하고 싶은지 생각했습니다.

여기 이를 지원하는 브라우저에서 작동하는 데모가 있습니다.

• 크롬, 엣지 v125
• 오페라 v111
• Android용 Chrome, Android 브라우저 v129

그럼 오늘 사용하고 싶으시면 어떻게 하시나요? 우리가 사용할 수 있는 폴리필이 있습니다.

oddbird/css-anchor-positioning 폴리필

브라우저 지원이 훌륭함

• 파이어폭스 54
• 크롬 51
• 엣지 79
• 사파리 10

비 폴리필 예시에 언급되지 않은 브라우저를 방문해 보세요. 아래 예시는 작동합니다. 저는 개인적으로 최신 버전의 Safari 및 Firefox를 테스트했습니다.

이는 대부분의 브라우저에서 추가 계산 오버헤드가 발생하지만 호환성이 충분할 때 사용하기 쉽고 끄는 것을 의미합니다.

이 접근 방식에는 한 가지 문제가 있는데, 폴리필의 크기가 ~92kb이므로 로드에 영향을 주지만 응용 프로그램/웹 사이트가 중요한 작업을 마친 후에는 지연 로드할 수 있습니다.