8

長いドキュメントのどの部分が現在表示されているかを知るにはどうすればよいですか?

たとえば、私の html に 1,000 行が含まれている場合
1
2
3
...
999
1000

ユーザーが500行目を表示している中央付近にいる場合、「500\n501\n502」などを取得したいと思います。

明らかに、ほとんどのシナリオはこれよりも複雑ですが、私の要件は、現在ブラウザーのビューポートに表示されているテキストを見つけて、現在のテキストに適したステータス値を表示できるようにすることです。

ありがとうマーティン

4

5 に答える 5

6

jQuery を使用している場合は、この関数を使用して、DOM 要素が現在ビューポートに表示されているかどうかを確認できます。

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));
}
于 2010-09-07T12:25:37.153 に答える
4

scrollTop プロパティから値をピクセル単位で取得できます。

document.body.scrollTop = 40;

ドキュメントのどの部分が表示されているかを知るには、負の scrollTop 値を持つものを見つけるまで、すべての p タグを (たとえば) ループすることができます。その前のものは、ウィンドウの上部にあるものです。

于 2010-09-07T12:20:28.323 に答える
1

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!");
   }
}
于 2012-06-07T09:55:43.123 に答える
0

はい、方法はあります。私の例を説明するために YUI の API を使用します。最初に、テキストは何らかの種類の dom 要素にある必要があります。スパン、div、p など、要素にある必要があります。ここではリスト項目を想定します

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])
        }
    }

つまり、基本的に、あなたが興味を持っているテキストを含むすべての dom オブジェクトを取得します。次にループし、Y 座標がビューポート Y と Y + ViewPort Height の間にある人を配列に入れます。

于 2010-09-07T12:18:36.780 に答える
0

自分の環境にとってより最適なソリューションと思われるものを実装しました。

私はAndroid用に書いているので、javascriptからJavaクラスと簡単にやり取りできます。私の実際の解決策にoffsetTopは、関心のあるすべてのタグを取得し、オフセットを Java に渡すことが含まれていました。

window.pageYOffsetまた、同じ Java クラスに渡された onscroll ハンドラーを登録します。offsetTop次に、Java クラスは各タグを比較pageYOffsetして、現在のビューポートの上部にあるタグを確認できます。

于 2010-09-08T11:53:39.983 に答える