Ανίχνευση divs όπως αποδίδεται στο παράθυρο για την εφαρμογή της Google Reader-όπως η αυτόματη-σήμα-όπως ανάγνωση;

ψήφοι
11

Όταν χρησιμοποιείτε το Google Reader και περιήγηση καταχωρήσεις RSS στο «ενισχυμένη» άποψη, εγγραφές αυτόματα θα επισημαίνονται ως «διαβάσει» μια φορά ένα ορισμένο ποσοστό του div είναι ορατό στην οθόνη (είναι δύσκολο να πω τι ποσοστό πρέπει να είναι ορατό στην περίπτωση της Google Reader). Έτσι, όπως κύλιση προς τα κάτω γραμμή-γραμμή, ο κώδικας javascript μπορεί να καθορίσει ότι α) η καταχώρηση που παρέχονται στο ορατό παράθυρο και β) ένα ορισμένο ποσό είναι ορατή και όταν πληρούνται οι προϋποθέσεις αυτές, η κατάσταση αλλάζει κατάσταση για να διαβάσετε .

Υπάρχει κάποιος που έχει κάποια ιδέα για το πώς υλοποιείται αυτή η δυνατότητα; Συγκεκριμένα, κάνει κάποιος εδώ ξέρει πώς να πει εάν ένα div έχει μεταβεί σε θέα ένα πόσο από το div είναι ορατό;

Παρεμπιπτόντως, είμαι με τη χρήση jQuery, οπότε αν κάποιος έχει jQuery-συγκεκριμένα παραδείγματα, που θα ήταν πολύ ευπρόσδεκτη.

Δημοσιεύθηκε 09/12/2008 στις 21:33
πηγή χρήστη
Σε άλλες γλώσσες...                            


6 απαντήσεις

ψήφοι
4

Το πραγματικό τέχνασμα είναι να παρακολουθείτε όπου η γραμμή κύλισης είναι το στοιχείο που περιέχει τα στοιχεία σας. Εδώ είναι μερικά κωδικό για άλλη μια χτυπημένη μέχρι να το κάνετε: http://pastebin.com/f4a329cd9

Μπορείτε να δείτε ότι κάνετε κύλιση αλλάζει εστίαση. Απλά πρέπει να προσθέσετε περισσότερα κώδικα χειρισμού με τη λειτουργία που χειρίζεται κάθε αλλαγή εστίασης. Λειτουργεί κύλιση προς τις δύο κατευθύνσεις, καθώς επίσης και με δεξί κλικ στη γραμμή κύλισης, η οποία απλή παρακολούθηση του ποντικιού δεν θα (πρέπει να αναφέρεται αν και σε αυτή την περίπτωση, δεδομένου ότι τα στοιχεία παραδείγματος είναι όλα το ίδιο μέγεθος, με το ίδιο κείμενο, είναι δύσκολο να πω ότι έχει πράγματι κύλιση). Το άλλο θέμα είναι το τι πρέπει να κάνετε όταν το δοχείο πυθμένα έξω. Η λύση που έχω αυτή τη στιγμή λειτουργεί μόνο σε FF. Αν θέλετε να έχετε το βλέμμα συμπαθητικό στον IE, θα πρέπει να χρησιμοποιήσετε ένα ομοίωμα στοιχείο που δένει στο παρασκήνιο, όπως αυτή που έχω σε σχόλια στον κώδικα.

Απαντήθηκε 15/12/2008 στις 05:51
πηγή χρήστη

ψήφοι
2

Απλά ήρθε σε αυτό το χρειάζομαι το ίδιο πράγμα, και φαίνεται εξαιρετικά χρήσιμο:

http://www.appelsiini.net/projects/viewport

Απαντήθηκε 28/12/2008 στις 07:53
πηγή χρήστη

ψήφοι
0

Μπορείτε να δοκιμάσετε αυτό το ένα, το σημείο κλειδί είναι το στοιχείο που πρέπει να ορατή σε εσωτερικό σώμα περισσότερο και να ανταποκρίνεται στο ορατό αναλογία (σε αυτή την περίπτωση 0,85).

isRead(element) {
   let rect = element.getBoundingClientRect();
   const visibleRatio = 0.85;
   let elementRatio = (window.innerHeight - Math.abs(rect.top))/rect.height;
   let isRead = (rect.top >= 0) && (elementRatio >= visibleRatio);
   return isRead; 
}
Απαντήθηκε 28/05/2018 στις 19:11
πηγή χρήστη

ψήφοι
0

Για να υπολογιστεί αν ένα στοιχείο είναι ορατό, μπορείτε να δημιουργήσετε μια τέτοια λειτουργία (πιστωτική οφείλεται εδώ https://stackoverflow.com/a/22480938/825240 ):

function isScrolledIntoView(element) {
  var elementTop = element.getBoundingRect().top;
  var elementBottom = element.getBoundingRect().bottom;

  var isVisible = (elementTop <= window.innerHeight) && (elementBottom >= 0);
  return isVisible;
}

Μπορείτε να προσαρμόσετε αυτή τη λειτουργία για την περίπτωσή σας με τον υπολογισμό και αν έχει διαβάσει ένα στοιχείο:

function isRead(element) {
  var elementTop = element.getBoundingRect().top;
  var elementBottom = element.getBoundingRect().bottom;
  var elementHeight = elementBottom - elementTop;

  // if 75% of the document has been scrolled, we'll assume it's been read
  var readIfPercentage = 0.75;

  // an element has been read if the top has been scrolled up out of view
  // and at least 75% of the element is no longer visible
  var isRead = (elementTop < 0 && Math.abs(elementTop) / elementHeight >= readIfPercentage);
  return isRead;
}

Στη συνέχεια, μπορείτε να καλέσετε τα παραπάνω λειτουργίες, περνώντας σε ένα κόμβο DOM ως στοιχείο:

isScrolledIntoView(document.getElementById('targetDiv');
//or
isRead(document.getElementById('targetDiv');

Μπορείτε να τα συνδέσει μεταξύ τους, δημιουργώντας έναν ακροατή κύλισης (jQuery κάνει αυτό αρκετά εύκολο):

function setScrollListener() {

  var scrollEventHandler = function() {
    if (isRead(document.getElementById('article'))) {
      // set article to 'read'
    }
  }

  // on scroll, fire the event handler
  $(document).scroll(scrollEventHandler);
}

Αξίζει να σημειωθεί ότι αν θέλετε να αποσυνδέσετε τον ακροατή κύλισης, δηλαδή αν όλα τα άρθρα έχουν διαβάσει και θα πρέπει πλέον να ακούσετε τον κύλισης, μπορείτε να καλέσετε το unbind λειτουργία εντός του scrollEventHandler. Είναι τόσο απλό:

function unbindScrollEventHandler() {
  $(document).unbind('scroll', scrollEventHandler);
}
Απαντήθηκε 03/10/2017 στις 13:20
πηγή χρήστη

ψήφοι
0

Η dom και javascript σας επιτρέπουν να υπολογίσετε ένα στοιχείο αντισταθμίζεται από τη μητρική της. Για να υπολογίσετε το offset από το παράθυρο θα πρέπει να χρησιμοποιήσετε αναδρομή και ανεβείτε το δρόμο σας προς την κορυφή παράθυρο, καθώς επίσης και συγκρίνετε ότι κατά το μέγεθος του παραθύρου. Αυτό γίνεται πιο περίπλοκη λόγω των ζητημάτων cross-browser και iframes.

Από όσο γνωρίζω, το πρωτότυπο προσφέρει μια απλή viewportOffsetμέθοδο που κάνει την περισσότερη δουλειά για σας. Μπορείτε επίσης να ελέγξετε την πηγή getOffsetParentκαι scrollTo. Δεν ξέρω για jQuery, αλλά περιμένω να προσφέρουν παρόμοιες μεθόδους.

Η εικασία μου είναι ότι το σενάριο αναγνώστη google τρέχει μόνο σε ένα συγκεκριμένο χρονικό διάστημα, ίσως μερικές φορές το δευτερόλεπτο, ή ίσως σε απάντηση σε μια εκδήλωση κύλισης. Και στις δύο περιπτώσεις, είμαι βέβαιος ότι θα είναι προσαρμοστική (αλλαγές χρονικό όριο με βάση το πόσο γρήγορα ο χρήστης πραγματοποιεί κύλιση, κλπ), και ότι είναι αρκετά έξυπνος για να μην είναι ένα γουρούνι των πόρων (δηλαδή, δεν ελέγχει μόνο όλα τα divs στην το έγγραφο)

Απαντήθηκε 14/12/2008 στις 00:36
πηγή χρήστη

ψήφοι
0

Σύμφωνα με την εμπειρία μου, αναγνώστης έχει σημειώσει μόνο ποτέ κάτι τόσο διαβάσετε αν έχω moused-over ή κλικ σε αυτό. Αν υποθέσουμε ότι μετακινείστε το ποντίκι σας πάνω από την div (έχω την τάση να θέσει το ποντίκι μου στο δεξί άκρο της οθόνης όταν κύλιση) που μπορεί να εξηγήσει την εντύπωση ότι το μόνο παίρνει χαραχτεί, όταν ένα ορισμένο% έχει αποδειχθεί.

Θα μπορούσε να είναι (και κατά πάσα πιθανότητα είμαι) λάθος, όμως. Ξέρω μόνο ότι η πράξη ακριβώς κύλιση στοιχεία μου αναγνώστη δεν τους διαχωρίζουν. Θα πρέπει να βεβαιωθείτε ότι ποντίκια το ποντίκι πάνω τους, καθώς μετακινείται για να το κάνει.

Απαντήθηκε 09/12/2008 στις 21:43
πηγή χρήστη

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more