Вы когда-нибудь пытались создать раскрывающийся список для своей кнопки, выбрать, но затем его блокировали из-за скрытого переполнения?

Тогда что вы делаете, тогда вы используете JavaScript, чтобы перебросить элемент в корень DOM, а затем позиционировать элемент на основе прямоугольника элементов триггера, пересчитывая каждый раз изменения макета, прокрутку и изменение размера окна, не очень эффективен.

Я хочу начать с того, что у него пока нет полной поддержки, но на данный момент есть полифил, позволяющий решить эту проблему.

Две основные функции, на которые мы будем опираться:

позиционирование привязки

поповеры

Итак, моя первоначальная идея возникла, когда я увидел, что диалог отправляется в корень, но со слоем DOM. Я наткнулся на popover API, где вы получаете ту же логику, но действует немного по-другому.

Я также помню, как видел сообщение о привязке элемента к бегунку на ползунке диапазона.

Тогда я подумал, что в основном вы хотите сделать для любого раскрывающегося списка, всплывающей подсказки и т. д., которые должны сломать скрытое переполнение, если вы смешаете эти два, вам не понадобится весь лишний javascript.

Итак, вот рабочая демо-версия в браузерах, которые ее поддерживают

• Chrome, Edge v125
• Опера v111
• Chrome для Android, браузер Andriod v129

Хорошо, а что если ты захочешь использовать его сегодня. Для этого есть полифилл, который мы можем использовать.

Полифилл Odbird/css-anchor-positioning

Имеет отличную поддержку браузеров

• Firefox 54
• Хром 51
• Эдж 79
• Сафари 10

Попробуйте открыть браузер, не упомянутый в примере без полифилла, и этот пример ниже работает. Я лично тестировал последние версии Safari и Firefox

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

У этого подхода есть один недостаток: размер полифила составляет ~92 КБ, поэтому это повлияет на загрузку, но вы можете лениво загружать его после того, как приложение/веб-сайт завершит что-то важное