Σίγουρα, μπορείτε να κάνετε κύλιση προς τα κάτω και να το δείτε, αλλά καλύτερα να προσεύχεστε ότι ο σχεδιαστής σας δεν μπορεί να σας φτάσει με ένα αιχμηρό αντικείμενο. Κωδικός > Κωδικός > Κωδικός > Κωδικός Αφήστε το να χτυπήσει Γνωρίζετε αυτό το συναίσθημα όταν δημιουργείτε το δικό σας στοιχείο αντί να βελτιώνετε τα προεπιλεγμένα στοιχεία HTML; Η ομάδα σχεδιασμού σας δημιούργησε κάτι όμορφο, αλλά τα προγράμματα περιήγησης δεν θα το υποστηρίξουν έξω από το κουτί, και η επιδιόρθωσή του παντού γίνεται εφιάλτης. Σήμερα, ήθελα να μιλήσω για μια παγίδα που μας περιμένει κατά τη διάρκεια αυτού του συναρπαστικού ταξιδιού: η τοποθέτηση των στοιχείων dropdown, όπως τα επιλεγμένα μενού ή οι επιλογές ημερομηνίας. Απολύτως λάθος Στην αρχή, μοιάζει με λύνει όλα τα προβλήματα μας, και το κάνει σε κάποιο βαθμό. position: το απόλυτο θέση: απόλυτη Αυτό απέχει πολύ από το να είναι τέλειο – μπορούμε να το κάνουμε καλύτερα. Fix It With 'fixed' Αν θέλουμε να εμφανίσουμε το περιεχόμενο πάνω από όλα, χρειαζόμαστε . Το μόνο πρόβλημα είναι ότι θα χάσουμε τις συντεταγμένες του γονικού στοιχείου: τα σταθερά στοιχεία είναι αρκετά ανεξάρτητα από τη φύση τους.Κωδικός > Κωδικός > Κωδικός > Κωδικός position: fixed Όταν το εμφανίζουμε. Όταν αλλάζει το περιεχόμενό του. Όταν κάνουμε κύλιση του παραθύρου και/ή του κυλιόμενου γονέα. Όταν αλλάζουμε το μέγεθος του παραθύρου και/ή του κυλιόμενου γονέα. Όταν το εμφανίζουμε. Όταν το περιεχόμενό του αλλάζει. Όταν κάνουμε κύλιση του παραθύρου και/ή του κυλιόμενου γονέα. Όταν αλλάζουμε το μέγεθος του παραθύρου και / ή του κυλιόμενου γονέα. Χρειάζεται επίσης να αποφασίσουμε αν θα το εμφανίσουμε πάνω από το toggler αν είναι πολύ κοντά στο κάτω μέρος της οθόνης. Θα χρησιμοποιήσω το Vue.js, αλλά θα πρέπει να είναι εύκολο να το ακολουθήσετε ακόμα και αν προτιμάτε το React ή το Angular. Let’s Rock This Joint Εδώ είναι η δομή που θα χρησιμοποιήσουμε: 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: HTMLE Echelon null = null, dropdownElement: HTMLDivementElement null = null, dropdownContent: Ref<nunk Η πτώση εμφανίζεται σωστά ακόμη και κατά τη διάρκεια της υπερφόρτωσης και κινείται πάνω από τον διακόπτη εάν δεν υπάρχει αρκετός χώρος κάτω. Μπορείτε να βρείτε τον πλήρη κώδικα στο . 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: HTMLE tiger null = null, dropdownElement: HTMLDivementEl tiger null = null, dropdownContent: Ref<nunkown> Ύψος Ύψος Ύψος Ύψος Ύψος Ύψος Ύψος Ύψος Ύψος Ύψος Ύψος Ύψος Ύψος Ύψος Ύψος Ύψος ΎψοςΕτικέτες: Ετικέτες: Ετικέτες: Ετικέτες: Ετικέτες: Ετικέτες: Ετικέτες: Ετικέτες: Ετικέτες: Ετικέτες: Ετικέτες: Ετικέτες: Ετικέτες: Ετικέτες: Ετικέτες: Ετικέτες: Ετικέτες: Ετικέτες: Ετικέτες: Ετικέτες: Ετικέτες: Ετικέτες: Ετικέτες: Ετικέτες: Ετικέτες: Ετικέτες: Ετικέτες: Ετικέτες: Ετικέτες: Ετικέτες: Ετικέτες: Ετικέτες: Ετικέτες: Ετικέτες: Ετικέτες: Ετικέτες: Ετικέτες: Ετικέτες: Ετικέτες: Ετικέ Κωδικός προτιμάται Υπάρχουν τέσσερις μεταβλητές για τη θέση πτώσης συν τη σημαία και μια συνάρτηση που τις ενημερώνει όλες.Κωδικός isDirectedUpwards isDirectedUpwards Όπως μπορεί να θυμάστε, πρέπει επίσης να χειριστούμε την κύλιση και την αλλαγή της κύλισης του κύλισης γονέα, οπότε ας δημιουργήσουμε μια συνάρτηση για να την βρούμε: const getFirstScrollableParent = (element: HTMLElementintza null): HTMLElement => { const parentElement = element?.parentElement; αν (!parentElement) επιστρέψετε document.body; const overflowY = window.getComputedStyle(parentElement).overflowY; αν (overflowY ==='scroll' Átha overflowY === 'auto') επιστρέψετε parentElement; επιστρέψτε getFirstScrollableParent(parentElement); }; const getFirstScrollableParent = (element: HTMLElementannoo null): HTMLElement => { const parentElement = element?.parentElement; αν (!parentElement) επιστρέψετε document.body; const overflowY = window.getComputedStyle(parentElement).overflowY; αν (overflowY ==='scroll' Doue overflowY === 'auto') επιστρέψετε parentElement; επιστρέψτε getFirstScrollableParent(parentElement); }; Τώρα, ας προσθέσουμε την κύρια συνάρτηση: Διαβιβάζουμε το και το για να μπορέσουμε να αντιδράσουμε στις ενημερώσεις τους. isDropdownDisplayed dropdownContent isDropdownΕμφάνιση DropdownΠεριεχόμενο Περνάμε επίσης το και το το οποίο χρειάζεται για να υπολογίσουμε τη θέση. togglerElement dropdownElement TogglerΤο στοιχείο DropdownΤο στοιχείο Τελικά, υπάρχει το σε περίπτωση που θέλετε το dropdown πάνω από το toggler από προεπιλογή. isUpwardPreferred Χρόνος για να χαλαρώσετε και να απολαύσετε Στο στοιχείο σας, θα χρειαστείτε κάτι σαν αυτό (υποθέτω ότι έχετε προσθέσει refs στο toggler και το dropdown στο πρότυπο): 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); } 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); } Και το CSS θα μοιάζει με αυτό: .dropdown { θέση: σταθερή· κάτω: v-bind('isDirectedUpwards? dropdownBottom : dropdownTop'); αριστερά: v-bind('dropdownLeft'); πλάτος: v-bind('dropdownWidth'); min-width: 0; } .dropdown { θέση: σταθερή· κάτω: v-bind('isDirectedUpwards? dropdownBottom : dropdownTop'); αριστερά: v-bind('dropdownLeft'); πλάτος: v-bind('dropdownWidth'); min-width: 0; } Και δεδομένου ότι είμαστε στο τέλος του άρθρου, θα ήθελα να σας αφήσω με κάτι χαρούμενο - αλλά δεν έχω ιδέες. Μπορείτε να βρείτε τον πλήρη κώδικα στο . GitHub GitHub GitHub
