Πώς να προσδιορίσετε το ύψος μιας σελίδας js. Πώς να προσδιορίσετε την "ανάλυση οθόνης" και το "μέγεθος παραθύρου προγράμματος περιήγησης" σε JavaScript και jQuery. Αλλαγή κύλισης σελίδας: scrollTo, scrollBy, scrollIntoView
Κατά την ανάπτυξη διεπαφών για ιστότοπους, συχνά πρέπει να χρησιμοποιείτε JavaScript. Φυσικά αυτό είναι κακό, αλλά σε ορισμένες περιπτώσεις είναι απλά αδύνατο να εφαρμοστούν τα πάντα πλήρως στο CSS.
Η πιο συνηθισμένη ανάγκη που έχω είναι να προσδιορίσω το πλάτος ή το ύψος του παραθύρου του προγράμματος περιήγησης για περαιτέρω χειρισμό. Κάτω από την περικοπή είναι όλες οι πληροφορίες για αυτό το θέμα.
Πού μπορεί να είναι χρήσιμο αυτό;Δεν θα μιλήσω για όλους, αλλά αυτό είναι χρήσιμο για μένα στην ενσωμάτωση με το Textpattern όλων των ειδών γκαλερί, ρυθμιστικών κ.λπ., όπου τα πάντα είναι γραμμένα σε καθαρό JS. Πράγματα που συνδέονται αυστηρά με το JS είναι σπάνια, αλλά συμβαίνουν, γι' αυτό εμφανίστηκε αυτή η σημείωση.
Μπορείτε να το ορίσετε με 2 τρόπους: JS ή jQuery.
Προσδιορισμός πλάτους ή ύψους χρησιμοποιώντας καθαρό JSΑυτή είναι η πιο προτιμώμενη μέθοδος, καθώς σχεδόν κάθε σύγχρονο πρόγραμμα περιήγησης διαθέτει μηχανή JavaScript. Ακόμη και τα προγράμματα περιήγησης για κινητά έχουν μάθει να λειτουργούν με JS.
Φυσικά, υπάρχει η πιθανότητα ο ίδιος ο χρήστης να απενεργοποιήσει την επεξεργασία JS στο πρόγραμμα περιήγησης, αλλά μου φαίνεται ότι δεν υπάρχουν πολλοί τέτοιοι «περίεργοι άνθρωποι», αφού σχεδόν κάθε ιστότοπος χρησιμοποιεί κάποιο είδος λύσης που εκτελείται σε JS.
Στο JS, για να προσδιορίσετε τα μεγέθη οθόνης, πρέπει να χρησιμοποιήσετε τις λειτουργίες:
Πλάτος οθόνης //Πλάτος οθόνης.Ύψος οθόνης //Ύψος οθόνης
Ακολουθεί ένα άσκοπο παράδειγμα χρήσης:
alert(screen.width+"x"+screen.height);
Εάν το χρησιμοποιείτε για να τοποθετήσετε ορισμένα στοιχεία στη σελίδα, τότε η καλύτερη λύση θα ήταν να χρησιμοποιήσετε τις διαστάσεις του παραθύρου του προγράμματος περιήγησης αντί για τα μεγέθη οθόνης. Στο JS αυτό γίνεται ως εξής:
Document.body.clientWidth //Πλάτος προγράμματος περιήγησης document.body.clientHeight //Ύψος προγράμματος περιήγησης
Ως εκ τούτου, εδώ είναι ένα παράδειγμα χρήσης χωρίς νόημα:
alert(document.body.clientWidth+"x"+document.body.clientHeight);
Το μέγεθος του προγράμματος περιήγησης με jQueryΠροσωπικά, χρησιμοποιώ τη μέθοδο που περιγράφεται παρακάτω. Αυτή η μέθοδος λειτουργεί μόνο εάν έχετε εγκαταστήσει προηγουμένως τη βιβλιοθήκη jQuery στον ιστότοπό σας. Σε όλους τους ιστότοπους που πρέπει να δημιουργήσω, αυτή η βιβλιοθήκη είναι ένα de facto πρότυπο.
Για να χρησιμοποιήσουμε το jQuery για την εργασία μας, πρέπει να χρησιμοποιήσουμε τον κώδικα:
$(παράθυρο).width(); //Πλάτος προγράμματος περιήγησης $(window).height(); //Ύψος προγράμματος περιήγησης
Και στο τέλος, θα ήθελα να πω ότι αν είναι δυνατό να κάνετε χωρίς JS και jQuery γενικά ή εν μέρει, τότε αυτό ακριβώς πρέπει να κάνετε.
Κοινοποιήστε στα μέσα κοινωνικής δικτύωσης δίκτυα
Σε τι χρησιμεύει αυτό; Για παράδειγμα, έχουμε μια όμορφη διάταξη ιστότοπου, η οποία δείχνει όλη της την ομορφιά μόνο σε ανάλυση, ας πούμε, 1600 επί 1200. Για παράδειγμα, έχει μια πολύ μεγάλη όμορφη κεφαλίδα. Τι συμβαίνει εάν ένα άτομο επισκεφτεί τον ιστότοπο με ανάλυση 1024 επί 768; Ναι, μόνο το καπέλο θα φαίνεται. ΟΧΙ καλα? Ισως. Τότε γιατί να μην κάνετε κάτι τέτοιο ώστε, δεδομένου του ύψους του προγράμματος περιήγησης/οθόνης, η κεφαλίδα απλά να κόβεται και το μενού και ο υπόλοιπος ιστότοπος να πηγαίνουν; Ουάου, ό,τι χρειάζεσαι.
Στην πραγματικότητα, περιέγραψα ένα από τα παραδείγματα που συνάντησα στην πράξη (βλ. εικόνα). Έλυσα το πρόβλημα απλά - μέσω javascript. Ή ίσως μέσω jQuery, δεν θυμάμαι. Θα περιγράψω και τις δύο μεθόδους εδώ.
Πρώτα απ 'όλα, είναι απαραίτητο να γίνει διάκριση μεταξύ των ορισμών "ανάλυσης οθόνης" και "μέγεθος παραθύρου προγράμματος περιήγησης" (καθώς σε ορισμένα άρθρα υπήρξαν περιστατικά - επέκριναν ορισμένες μεθόδους, πρότειναν άλλες, αν και σε μια περίπτωση μέτρησαν την ανάλυση του προγράμματος περιήγησης, στο άλλο - την ανάλυση της οθόνης).
Πρέπει να καθορίσετε από την αρχή τι είναι πιο σημαντικό για εσάς. Στην περίπτωση αυτού του παραδείγματος με την κεφαλίδα, καθοδηγήθηκα από την ανάλυση της οθόνης (οθόνης): τελικά, ο ιστότοπος είναι όμορφος, εάν το παράθυρο του προγράμματος περιήγησης μειωθεί χειροκίνητα, τότε αφήστε τους να επεκτείνουν το πρόγραμμα περιήγησής τους σε πλήρη οθόνη κατά την προβολή αυτού ιστότοπος (δεν έχουν δουλειά, ξέρετε - σημείωση του συντάκτη). Αλλά, για παράδειγμα, για να προσαρμόσω την εκτεταμένη εικόνα της γκαλερί jQuery Lightbox, χρησιμοποίησα το πλάτος και το ύψος του προγράμματος περιήγησης.
Και αφού επιλέξουμε, γράφουμε τον κώδικα, ίσως στην κεφαλίδα του ιστότοπου. Πρώτα ένα παράδειγμα επικεντρωμένο στην ανάλυση οθόνης.
Οι γραμμές 3-6 είναι καθαρά javascript, οι γραμμές 7-11 είναι ένα παράδειγμα στο jQuery. Για τον προσδιορισμό του πλάτους και του ύψους, χρησιμοποιούνται οι μέθοδοι javascript screen.width και screen.height. Αυτό που κάνουν οι γραμμές είναι σαφές: το πρώτο σενάριο καθορίζει τη διαδρομή προς πρόσθετο αρχείο CSS, και το άλλο ορίζει την ιδιότητα css "background-position" για το μπλοκ με το σύνολο του αναγνωριστικού.
Ας δούμε το δεύτερο παράδειγμα, το οποίο όμως θα επικεντρωθεί στην ανάλυση του προγράμματος περιήγησης. Όλα είναι ίδια, οι μέθοδοι έχουν αλλάξει.
Έτσι, από δύο παραδείγματα, μια σύντομη επισκόπηση του τι πρέπει να χρησιμοποιηθεί για τι:
Είναι σαφές ότι εάν χρησιμοποιείτε jQuery, τότε η επιλογή 5 είναι προτιμότερη από το 3 και το 6 έως το 4 - είναι απλώς μικρότερες. Λοιπόν, εξαρτάται από τη γεύση και το χρώμα.
Όσο για τις συγκεκριμένες εγγραφές για ύψος και πλάτος οθόνης για jQuery, για να είμαι ειλικρινής, δεν τις γνωρίζω. Θεωρητικά θα έπρεπε να υπάρχει μια δομή σαν 5-6 γραμμές, αλλά κάπως δεν την έχω συναντήσει στην πράξη, μου φαίνεται ότι δεν υπάρχουν. Και δεν είναι απαραίτητο, το screen.width είναι αρκετά σύντομη κατασκευή, είναι αρκετό.
Ναι, υπάρχει επίσης το $(document).width() - καθορίζει το πλάτος του εγγράφου HTML. Η χρήση στην πράξη είναι κατά κάποιο τρόπο αμφίβολη. Ποιος ξέρει, θα χαρώ αν το μοιραστείτε.
Αυτά για σήμερα! Ας αντέξουμε μέχρι το Σαββατοκύριακο και πάμε μαζικά σε μπάρμπεκιου! (εκτός αν είστε άρρωστοι με κάτι, όπως κάποιοι - σημείωση του συντάκτη). Καλή τύχη!
Γειά σου! Συνεχίζοντας το θέμα σε αυτό το μάθημα, θα εξετάσουμε το ζήτημα της κύλισης μιας ιστοσελίδας και του χειρισμού των μεγεθών του προγράμματος περιήγησης. Πώς μπορείτε να βρείτε το πλάτος του προγράμματος περιήγησης; Πώς να κάνετε κύλιση σε μια ιστοσελίδα χρησιμοποιώντας JavaScript; Νομίζω ότι θα βρείτε τις απαντήσεις σε αυτές τις ερωτήσεις σε αυτό το μάθημα.
Όχι window.innerWidth/Ύψος
Θα πρέπει να σημειωθεί ότι όλα τα προγράμματα περιήγησης εκτός του IE8 μπορούν επίσης να υποστηρίξουν τις ιδιότητες window.innerWidth/innerHeight. Αποταμιεύουν τρέχον μέγεθοςπαράθυρο.
Ποιά είναι η διαφορά? Εσύ ρωτάς. Είναι μικρό βέβαια, αλλά εξαιρετικά σημαντικό.
Οι ιδιότητες clientWidth/Height, εάν υπάρχει γραμμή κύλισης, θα επιστρέψουν ακριβώς το πλάτος/ύψος μέσα σε αυτό, διαθέσιμο για ολόκληρο το έγγραφο και το window.innerWidth/Height θα αγνοήσει την παρουσία του.
Εάν η δεξιά πλευρά της σελίδας καταλαμβάνεται από μια γραμμή κύλισης, τότε αυτές οι γραμμές θα εμφανίζουν διαφορετικά πράγματα:
Ειδοποίηση(window.innerWidth); // ολόκληρο το πλήρες πλάτος του παραθύρου alert(document.documentElement.clientWidth); // πλάτος μείον κύλιση
Συνήθως μας ενδιαφέρει μόνο το διαθέσιμο πλάτος του παραθύρου, για παράδειγμα, να σχεδιάσουμε κάτι, δηλαδή μείον τη γραμμή κύλισης. Επομένως, το documentElement.clientWidth χρησιμοποιείται συχνά.
Πλάτος/ύψος μιας ιστοσελίδας λαμβάνοντας υπόψη την κύλισηΝαι, θεωρητικά, το ορατό τμήμα της σελίδας είναι documentElement.clientWidth/Ύψος, αλλά το πλήρες μέγεθος συμπεριλαμβανομένης της γραμμής κύλισης είναι, κατ' αναλογία, documentElement.scrollWidth/scrollHeight.
Αυτό ισχύει για όλα τα κανονικά στοιχεία.
Αλλά για μια σελίδα με αυτές τις ιδιότητες, μπορεί να προκύψει πρόβλημα όταν υπάρχει ή όχι η κύλιση. Σε αυτή την περίπτωση δεν λειτουργούν σωστά. Πρέπει να ειπωθεί ότι σε Προγράμματα περιήγησης Chrome/ Safari και Opera, ελλείψει γραμμής κύλισης, η τιμή του documentElement.scrollHeight σε αυτήν την περίπτωση μπορεί να είναι ακόμη μικρότερη από το documentElement.clientHeight, το οποίο, φυσικά, μοιάζει με κάτι παράλογο
Αυτό το ζήτημα ενδέχεται να παρουσιαστεί ειδικά για το documentElement.
Αλλά μπορείτε να προσδιορίσετε αξιόπιστα το μέγεθος της σελίδας λαμβάνοντας υπόψη την κύλιση, λαμβάνοντας απλώς το μέγιστο από αυτές τις πολλές ιδιότητες:
Var scrollVisota = Math.max(document.body.scrollVisota, document.documentElement.scrollHeight, document.body.offsetVisota, document.documentElement.offsetHeight, document.body.clientVisota, document.documentElement.clientHeight); alert("Ύψος συμπεριλαμβανομένης της κύλισης: " + scrollVisota);
Λήψη της τρέχουσας κύλισηςΕάν ένα κανονικό στοιχείο έχει τρέχουσα κύλιση, μπορείτε να το βρείτε στο scrollLeft/scrollTop.
Τι γίνεται λοιπόν με τη σελίδα;
Το θέμα είναι ότι τα περισσότερα προγράμματα περιήγησης θα χειριστούν σωστά ένα αίτημα για documentElement.scrollLeft/Top, αλλά το Safari/Chrome/Opera έχει σφάλματα που απαιτούν τη χρήση του document.body.
Λοιπόν, για να ξεπεράσετε αυτό το πρόβλημα εντελώς, μπορείτε να χρησιμοποιήσετε τις ιδιότητες window.pageXOffset/pageYOffset:
Alert("Τρέχουσα κύλιση επάνω: " + window.pageYOffset); alert("Τρέχουσα αριστερή κύλιση: " + window.pageXOffset);
Αυτές είναι όλες οι ιδιότητες:
- Δεν υποστηρίζεται IE8-
- Μπορούν μόνο να διαβαστούν και δεν μπορούν να αλλάξουν.
Εάν το IE8 δεν έχει σημασία, τότε απλώς χρησιμοποιούμε αυτές τις ιδιότητες.
Μια επιλογή cross-browser που λαμβάνει υπόψη το IE8 παρέχει μια επιλογή στο documentElement:
Var scrollTop = window.pageYOffset || document.documentElement.scrollTop; alert("Τρέχουσα κύλιση: " + scrollTop);
Αλλαγή κύλισης σελίδας: scrollTo, scrollBy, scrollIntoViewΓια να πραγματοποιήσετε κύλιση σε μια σελίδα χρησιμοποιώντας JavaScript, όλα τα στοιχεία της πρέπει να είναι πλήρως φορτωμένα.
Σε κανονικά στοιχεία, το scrollTop/scrollLeft μπορεί, καταρχήν, να αλλάξει και το στοιχείο θα πραγματοποιήσει κύλιση.
Κανείς δεν σας εμποδίζει να κάνετε το ίδιο με τη σελίδα. Σε όλα τα προγράμματα περιήγησης εκτός από το Chrome/Safari/Opera, μπορείτε να κάνετε κύλιση ορίζοντας απλώς document.documentElement.scrollTop και σε αυτά τα προγράμματα περιήγησης θα πρέπει να χρησιμοποιήσετε το document.body.scrollTop για αυτό. Και όλα θα λειτουργήσουν υπέροχα.
Υπάρχει όμως μια άλλη, καθολική λύση - ειδικές μέθοδοι κύλισης σελίδας window.scrollBy(x,y) και window.scrollTo(pageX,pageY).
- Η μέθοδος scrollBy(x,y) θα κυλήσει τη σελίδα σε σχέση με τις τρέχουσες συντεταγμένες της.
- Η μέθοδος scrollTo(pageX,pageY) μετακινεί τη σελίδα στις καθορισμένες συντεταγμένες σε σχέση με ολόκληρο το έγγραφο. Θα ισοδυναμεί με τη ρύθμιση των ιδιοτήτων scrollLeft/scrollTop. Για να μετακινηθείτε στην αρχή του εγγράφου, πρέπει απλώς να καθορίσετε τις συντεταγμένες (0,0).
Η μέθοδος elem.scrollIntoView(top) πρέπει να καλείται στο στοιχείο και να κάνει κύλιση στη σελίδα έτσι ώστε το στοιχείο να βρίσκεται στην κορυφή, εάν το επάνω μέρος είναι αληθές, και στο κάτω μέρος, εάν το επάνω μέρος είναι ψευδές. Επιπλέον, εάν αυτή η κορυφαία παράμετρος δεν έχει καθοριστεί, τότε θα είναι ίση με την αλήθεια.
Anti-scrollΥπάρχουν περιπτώσεις όπου είναι απαραίτητο να κάνετε ένα έγγραφο "μη κύλισης". Για παράδειγμα, εμφάνιση ενός μεγάλου πλαισίου διαλόγου πάνω από ένα έγγραφο, έτσι ώστε ο επισκέπτης να μπορεί να πραγματοποιήσει κύλιση στο πλαίσιο διαλόγου αλλά όχι στο ίδιο το έγγραφο.
Για να αποτρέψετε την κύλιση σελίδας, απλώς ορίστε την ιδιότητα document.body.style.overflow = "κρυφό".
Αντί για document.body μπορεί να υπάρχει οποιοδήποτε στοιχείο που πρέπει να απενεργοποιηθεί από την κύλιση.
Αλλά το μειονέκτημα αυτής της μεθόδου είναι ότι η ίδια η γραμμή κύλισης εξαφανίζεται. Εάν καταλάμβανε ένα ορισμένο πλάτος, τότε τώρα αυτό το πλάτος θα ελευθερωθεί και το περιεχόμενο της σελίδας θα επεκταθεί, το κείμενο θα "πηδήσει", καταλαμβάνοντας όλο τον ελεύθερο χώρο.
Αποτελέσματα- Για να λάβετε τις διαστάσεις του ορατού τμήματος του παραθύρου, χρησιμοποιήστε την ιδιότητα: document.documentElement.clientWidth/Height
- Για να λάβετε τις διαστάσεις της σελίδας λαμβάνοντας υπόψη την κύλιση, χρησιμοποιήστε: var scrollHeight = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight, document.body.offsetHeight, document.documentElement.offsetHeight, document.body.clientHeight, έγγραφο. documentElement .clientHeight);
Σε αυτό το μάθημα, θα εξετάσουμε τις ιδιότητες του αντικειμένου παραθύρου, με τις οποίες μπορείτε να λάβετε τις διαστάσεις της περιοχής εργασίας του παραθύρου του προγράμματος περιήγησης (innerWidth και innerHeight), τις διαστάσεις του ίδιου του παραθύρου (outerWidth και outerHeight), η θέση του σε σχέση με την επάνω αριστερή γωνία της οθόνης του χρήστη (screenLeft και screenTop) και κύλιση θέσεων (pageXOffset και pageYOffset).
ιδιότητες innerWidth και innerHeightΈχουν σχεδιαστεί για να λαμβάνουν τις διαστάσεις της ορατής περιοχής εργασίας του παραθύρου του προγράμματος περιήγησης. Εκείνοι. Οι ιδιότητες innerWidth και innerHeight προορίζονται να λάβουν το πλάτος και το ύψος της περιοχής στην οποία εμφανίζεται το έγγραφο HTML. Αυτές οι ιδιότητες είναι μόνο για ανάγνωση και επιστρέφουν τιμές pixel.
Για παράδειγμα, λάβετε το ύψος και το πλάτος της ορατής περιοχής εργασίας του παραθύρου του προγράμματος περιήγησης:
Πλάτος της ορατής περιοχής προβολής (widthContenArea):
Πλάτος της ορατής περιοχής προβολής (ύψοςContenArea):
// πλάτος της ορατής θύρας προβολής (για όλα τα προγράμματα περιήγησης εκτός Internet Explorer 8) var widthContenArea = window.innerWidth; // ύψος της ορατής θύρας προβολής (για όλα τα προγράμματα περιήγησης εκτός του Internet Explorer 8) var heightContenArea = window.innerHeight; // πλάτος της ορατής θύρας προβολής (για τον Internet Explorer 8) widthContenArea = document.documentElement.clientWidth || document.body.clientWidth; // ύψος της ορατής θύρας προβολής (για τον Internet Explorer 8) heightContenArea = document.documentElement.clientHeight || document.body.clientHeight; // πλάτος της ορατής θύρας προβολής (για όλα τα προγράμματα περιήγησης) widthContenArea1 = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; // ύψος της ορατής θύρας προβολής (για όλα τα προγράμματα περιήγησης) heightContenArea1 = window.innerHeight || document.documentElement.clientΎψος || document.body.clientHeight; document.getElementById("widthContenArea").innerHTML = widthContenArea; document.getElementById("heightContenArea").innerHTML = heightContenArea;Ιδιότητες outerWidth και outerHeightΈχουν σχεδιαστεί για να λαμβάνουν τις διαστάσεις ολόκληρου του παραθύρου του προγράμματος περιήγησης, π.χ. συμπεριλαμβανομένων γραμμών εργαλείων, γραμμών κύλισης, γραμμής κατάστασης, περιγράμματος παραθύρων κ.λπ. Οι ιδιότητες outerWidth και outerHeight είναι μόνο για ανάγνωση και επιστρέφουν το πλάτος και το ύψος του παραθύρου σε pixel, αντίστοιχα.
Για παράδειγμα, λάβετε το ύψος και το πλάτος του παραθύρου του προγράμματος περιήγησης:
Πλάτος παραθύρου προγράμματος περιήγησης (widthWindow):
Ύψος παραθύρου προγράμματος περιήγησης (heighWindow):
// πλάτος παραθύρου προγράμματος περιήγησης var widthWindow = window.outerWidth; // ύψος παραθύρου προγράμματος περιήγησης var heightWindow = window.outerHeight; document.getElementById("widthWindow").innerHTML = widthWindow; document.getElementById("heightWindow").innerHTML = heightWindow;Ιδιότητες screenLeft (screenX) και screenTop (screenY).Έχουν σχεδιαστεί για να λαμβάνουν τις συντεταγμένες της επάνω αριστερής γωνίας του παραθύρου ή του εγγράφου του προγράμματος περιήγησης σε σχέση με την επάνω αριστερή γωνία της οθόνης του χρήστη.
Σε αυτήν την περίπτωση, οι ιδιότητες screenLeft και screenTop λειτουργούν στον Internet Explorer και οι ιδιότητες screenX και screenY λειτουργούν στον Mozilia Firefox. Στο Chrome, το Safari και άλλα παρόμοια προγράμματα περιήγησης, μπορείτε να χρησιμοποιήσετε και τις ιδιότητες screenLeft και screenTop, καθώς και τις ιδιότητες screenX και screenY.
Όταν χρησιμοποιείτε αυτές τις ιδιότητες, πρέπει να λάβετε υπόψη το γεγονός ότι ορισμένα προγράμματα περιήγησης ενδέχεται να επιστρέψουν τις συντεταγμένες της επάνω αριστερής γωνίας του εγγράφου και ορισμένα προγράμματα περιήγησης ενδέχεται να επιστρέψουν τις συντεταγμένες της επάνω αριστερής γωνίας του παραθύρου. Οι ιδιότητες screenleft (screenX) και screenTop (screenY) είναι μόνο για ανάγνωση και επιστρέφουν τις οριζόντιες και κάθετες αποστάσεις σε σχέση με την αριστερή γωνία της οθόνης σε pixel, αντίστοιχα.
Για παράδειγμα, ας εμφανίσουμε με τη μορφή μηνύματος τις συντεταγμένες x και y της αριστερής γωνίας του τρέχοντος παραθύρου του προγράμματος περιήγησης (έγγραφο) σε σχέση με την επάνω αριστερή γωνία της οθόνης:
συνάρτηση windowXY() ( // Χρησιμοποιώντας τις ιδιότητες screenleft και screenTop, παίρνουμε τις συντεταγμένες της θέσης του παραθύρου (έγγραφο) var winX = window.screenLeft; var winY = window.screenTop; // Χρησιμοποιώντας τις ιδιότητες screenX και screenY, παίρνουμε τις συντεταγμένες της θέσης του παραθύρου (έγγραφο) winX = window.screenX, winY = window.screenY, // Λάβετε τις συντεταγμένες της θέσης του παραθύρου (έγγραφο) σε όλα τα προγράμματα περιήγησης winX = window.screenX ? window.screenX: window.screenLeft; winY = window.screenY ? window.screenY: window.screenTop ; window.alert ("Συντεταγμένες παραθύρου σε σχέση με την οθόνη του χρήστη: X = " + winX + ", Y = " + winY + "."); ) Μάθετε το συντεταγμένες
Έχουν σχεδιαστεί για να λαμβάνουν τον αριθμό των εικονοστοιχείων με τα οποία έχει γίνει κύλιση του εγγράφου στην οριζόντια (pageXOffset) ή κάθετη (pageYOffset) κατεύθυνση σε σχέση με την επάνω αριστερή γωνία του παραθύρου. Οι ιδιότητες scrollX και scrollY είναι ισοδύναμες με τις ιδιότητες pageXOffset και pageYOffset, αντίστοιχα. Αυτές οι ιδιότητες είναι μόνο για ανάγνωση.
Για παράδειγμα, εμφανίστε σε ένα μήνυμα τον αριθμό των pixel με τα οποία έγινε κύλιση του εγγράφου στην οριζόντια (pageXOffset) και στην κατακόρυφη (pageYOffset) κατεύθυνση.
συνάρτηση scrollContent() ( //Κύλιση του τρέχοντος εγγράφου 200 px προς τα δεξιά και προς τα κάτω window.scrollBy(200,200); //Λάβετε τις τιμές χρησιμοποιώντας τις ιδιότητες pageXOffset και pageYOffset var winOffsetX = window.pageXOffset; var winOffsetY = window.pageYOffset ; //Λάβετε τις τιμές με τις οποίες έγινε κύλιση του εγγράφου οριζόντια ή κάθετα για τον Internet Explorer: winOffsetX = document.documentElement.scrollLeft; winOffsetY = document.documentElement.scrollTop; //Για όλα τα προγράμματα περιήγησης: winOffsetX = window.pageXOffset || έγγραφο .documentElement.scrollLeft; winOffsetY = window.pageYOffset || document.documentElement.scrollTop; ειδοποίηση ("Αριθμός pixel με τα οποία το έγγραφο κύλισε οριζόντια και κάθετα: X = " + winOffsetX + ", Y = " + winOffsetY + ". "); ) Μάθετε τις θέσεις των γραμμών κύλισης
