Comment obtenir le contenu en cours d'affichage du navigateur dans viewport

Question

Comment puis-je obtenir une indication de quelle partie d'un long document est en cours d'affichage?

par exemple. si mon html contient 1000 lignes
   1
   2
   3
...
   999
   1000

et l'utilisateur est proche du milieu montrant la ligne 500e alors je voudrais obtenir « 500 \ N501 \ N502 » ou quelque chose comme ça.

Il est évident que la plupart des scénarios serait plus complexe que cela, mais mon exigence est de trouver quel texte est actuellement affiché dans la fenêtre du navigateur afin que je puisse montrer une valeur d'état appropriée au texte actuel.

Merci Martin

Answer 1

Vous pouvez obtenir une valeur en pixels de la propriété scrollTop:

document.body.scrollTop = 40;

Pour savoir quelle partie de votre document qui est visible, vous pouvez boucle par (par exemple) toutes les balises p jusqu'à ce que vous en trouver un avec une valeur négative scrollTop. L'une avant qui est celle de la partie supérieure de la fenêtre.

Answer 2

Si vous avez jQuery, vous pouvez utiliser cette fonction pour vérifier si un élément DOM est actuellement affiché dans la fenêtre:

function isInView(elem) {

    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();

    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();

    return ((elemBottom >= docViewTop) && (elemTop <= docViewBottom));
}

Answer 3

Je viens de voir un morceau de code échantillon sur msdn

function isinView(oObject)
{
   var oParent = oObject.offsetParent; 
   var iOffsetTop = oObject.offsetTop;
   var iClientHeight = oParent.clientHeight;
   if (iOffsetTop > iClientHeight) {
     alert("Special Text not in view. Expand Window to put Text in View.");
   }
   else{
      alert("Special Text in View!");
   }
}

Answer 4

Oui, il y a un moyen. Je vais utiliser l'API de YUI pour illustrer mon exemple. Tout d'abord votre texte doit être en quelque sorte l'élément dom, que ce soit un espace, div, p ou quoi que ce soit, il doit être dans un élément. Ici, je vais prendre un élément de liste

var viewPortY = YAHOO.util.Dom.getDocumentScrollTop(),
viewPortHeight = YAHOO.util.Dom.getViewportHeight(), i = 0,
// get all the dom elements that contain the text, sorry if this isn't exact, its just a rough example
items = YAHOO.util.Dom.getElementBy(null, 'li', document.getElementById('item-container')),
viewedItems = [];
    for (i = 0 ; i < items.length; i++) {
        var y = YAHOO.util.Dom.getY(items[i])
        if (y > viewPortY && y < (viewPortY + viewPortHeight)) {
           viewedItems.push(items[i])
        }
    }

Donc, essentiellement, je reçois tous les objets dom qui contiennent le texte de votre intérêt. Je boucle puis à travers, et celui qui est ce coordonnée Y est entre les viewports Y et Y + ViewPort Hauteur, je mets dans un tableau.

Answer 5

Je mis en œuvre ce que je pensais était une solution plus optimale pour mon environnement:

Je suis en train d'écrire pour Android afin que je puisse interagir facilement avec une classe Java de javascript. Ma solution réelle consistait à amener offsetTop de tous les tags Je suis intéressé et passer les compensations java.

Enregistrement également un gestionnaire onscroll qui a passé window.pageYOffset throught à la même classe Java. Ensuite, la classe java peut comparer offsetTop de chaque étiquette avec pageYOffset pour voir quelle balise se trouve au sommet de la fenêtre actuelle.