Varsayılan HTML bileşenlerini geliştirmek yerine kendi bileşeninizi oluşturduğunuzda hissettiğiniz duyguyu biliyor musunuz? Tasarım ekibiniz güzel bir şey yarattı, ancak tarayıcılar bunu kutudan çıktığı haliyle desteklemiyor ve her yerde düzeltmek bir kabusa dönüşüyor. Hepimiz bu acıyı biliyoruz, ancak bu zorluklar işimizi ilginç hale getiriyor. Bugün, bu heyecanlı yolculukta bizi bekleyen tuzaklardan birinden bahsetmek istiyorum: Seçim menüleri veya tarih seçiciler gibi açılır öğelerin yerleşimi. Kesinlikle Yanlış İlk başta, tüm sorunlarımızı çözüyor gibi görünüyor ve bir dereceye kadar da öyle. Ama sonra, modal pencereler her şeyi mahvediyor. position: absolute Açılır menü taşarsa kesilir. Elbette aşağı kaydırıp görebilirsiniz, ancak tasarımcınızın size keskin bir nesneyle ulaşamayacağı konusunda dua etmeniz daha iyi olur. Bu mükemmel olmaktan çok uzak; daha iyisini yapabiliriz. ile düzeltin 'fixed' İçeriği her şeyin üzerinde görüntülemek istiyorsak, ihtiyacımız var. Tek sorun, ebeveyn öğe koordinatlarını kaybedecek olmamız: fixed öğeler doğası gereği oldukça bağımsızdır. Bu, yapmamız gereken tek şeyin bu durumlarda açılır öğenin tam koordinatlarını belirlemek olduğu anlamına gelir: position: fixed Bunu gösterdiğimizde. İçeriği değiştiğinde. Pencereyi ve/veya kaydırılabilir üst öğeyi kaydırdığımızda. Pencereyi ve/veya kaydırılabilir üst öğeyi yeniden boyutlandırdığımızda. Ayrıca ekranın altına çok yakınsa toggle'ın üstünde görüntülenip görüntülenmeyeceğine karar vermemiz gerekiyor. Yapılabilir gibi görünüyor. Ben Vue.js kullanacağım ama React veya Angular'ı tercih etseniz bile takip etmesi kolay olmalı. Hadi Bu Ortaklığı Sallayalım Kullanacağımız yapı şu şekilde: export const useDropdownAttributes = () => { const dropdownWidth = ref(''); const dropdownTop = ref(''); const dropdownBottom = ref(''); const dropdownLeft = ref(''); const isDirectedUpwards = ref(false); const togglerRect = ref<DOMRect>(); const dropdownRect = ref<DOMRect>(); const autodetectPosition = ( isDropdownDisplayed: Ref<boolean>, togglerElement: HTMLElement | null = null, dropdownElement: HTMLDivElement | null = null, dropdownContent: Ref<unknown> | ComputedRef<unknown> = ref([]), isUpwardPreferred = false, ) => { // ... } return { autodetectPosition, dropdownTop, dropdownBottom, dropdownLeft, dropdownWidth, isDirectedUpwards, togglerRect, dropdownRect, }; }; Açılır liste konumu için dört değişken artı bayrağı ve hepsini güncelleyen bir fonksiyon var. Ayrıca, toggler'ın ve açılır listelerin Rects'leri için iki değişken döndürüyoruz: bu, örneğin, içeriğin ortasına hizalanması gereken araç ipuçları için kullanışlı olabilir. isDirectedUpwards Hatırlayacağınız üzere kaydırılabilir üst öğenin kaydırılması ve yeniden boyutlandırılmasıyla da ilgilenmemiz gerekiyor, bu yüzden onu bulmak için bir fonksiyon oluşturalım: const getFirstScrollableParent = (element: HTMLElement | null): HTMLElement => { const parentElement = element?.parentElement; if (!parentElement) return document.body; const overflowY = window.getComputedStyle(parentElement).overflowY; if (overflowY === 'scroll' || overflowY === 'auto') return parentElement; return getFirstScrollableParent(parentElement); }; Şimdi main fonksiyonunu ekleyelim: const autodetectPosition = ( isDropdownDisplayed: Ref<boolean>, togglerElement: HTMLElement | null = null, dropdownElement: HTMLElement | null = null, dropdownContent: Ref<unknown> | ComputedRef<unknown> = ref([]), isUpwardPreferred = false, ) => { if (!togglerElement || !dropdownElement) return; const updateDropdownAttributes = () => { togglerRect.value = togglerElement.getBoundingClientRect(); dropdownRect.value = dropdownElement.getBoundingClientRect(); dropdownWidth.value = `${togglerRect.value.width}px`; dropdownBottom.value = `${window.innerHeight - togglerRect.value.top}px`; dropdownTop.value = `${ window.innerHeight - togglerRect.value.bottom - dropdownRect.value.height }px`; dropdownLeft.value = `${togglerRect.value.left}px`; }; const handleResize = () => { requestAnimationFrame(updateDropdownAttributes); }; const handleScroll = () => { requestAnimationFrame(updateDropdownAttributes); }; watch( [isDropdownDisplayed, dropdownContent], ([newVal, _]) => { const scrollableParent = getFirstScrollableParent(togglerElement); if (!newVal) { window.removeEventListener('resize', handleResize); window.removeEventListener('scroll', handleScroll); scrollableParent.removeEventListener('resize', handleResize); scrollableParent.removeEventListener('scroll', handleScroll); return; } requestAnimationFrame(() => { const distanceFromBottom = window.innerHeight - togglerElement.getBoundingClientRect().bottom; const distanceFromTop = togglerElement.getBoundingClientRect().top; const dropdownHeight = dropdownElement.offsetHeight; isDirectedUpwards.value = isUpwardPreferred ? distanceFromTop > dropdownHeight : distanceFromBottom < dropdownHeight && distanceFromTop > dropdownHeight; updateDropdownAttributes(); window.addEventListener('resize', handleResize); window.addEventListener('scroll', handleScroll); scrollableParent.addEventListener('resize', handleResize); scrollableParent.addEventListener('scroll', handleScroll); }); }, { deep: true }, ); }; ve geçiriyoruz ki onların güncellemelerine tepki verebilelim. isDropdownDisplayed dropdownContent Ayrıca pozisyonu hesaplamak için ihtiyacımız olan ve elemanlarını da gönderiyoruz. togglerElement dropdownElement Son olarak, varsayılan olarak toggle'ın üstündeki açılır menüyü istiyorsanız seçeneğini kullanabilirsiniz. isUpwardPreferred Rahatlama ve Eğlenme Zamanı Bileşeninizde buna benzer bir şeye ihtiyacınız olacak (şablondaki toggler'ınıza ve açılır menünüze referanslar eklediğinizi varsayıyorum): const { autodetectPosition, dropdownTop, dropdownBottom, dropdownLeft, dropdownWidth, isDirectedUpwards, } = useDropdownAttributes(); const togglerRef = ref<HTMLElement>(); const dropdownRef = ref<HTMLElement>(); const isDropdownShown = ref(false); onMounted(() => { autodetectPosition(isDropdownShown, togglerRef.value?.$el, dropdownRef.value?.$el); }); Ve CSS şu şekilde görünecek: .dropdown { position: fixed; bottom: v-bind('isDirectedUpwards ? dropdownBottom : dropdownTop'); left: v-bind('dropdownLeft'); width: v-bind('dropdownWidth'); min-width: 0; } İşte oldu. Açılır liste taştığında bile düzgün bir şekilde görüntüleniyor ve altında yeterli alan yoksa geçiş düğmesinin üstüne taşınıyor. Ve makalenin sonuna geldiğimiz için, size neşeli bir şey bırakmak isterdim—ama fikirlerim tükendi. Bu yüzden, korkarım bu sefer elimde sadece "iyi şanslar" var. İyi şanslar. 👋 Kodun tamamını bulabilirsiniz. GitHub'da
