Kann ich den für den Benutzer sichtbaren Bereich im Browser erkennen?

Lesezeit: 5 Minuten

Wie Sie im Bild unten sehen können, gibt es auf der Website „A“, „B“, „C“, „D“ und „E“, und der Benutzer kann möglicherweise nur A, B und kleine Teile davon sehen D in ihrem Browser. Sie müssen im Browser nach unten scrollen, oder einige Benutzer haben möglicherweise einen größeren Bildschirm oder ein längeres Fenster in ihrem Browser, mit dem sie sogar das Element C sehen können.

Ok, meine Frage ist, ist dies möglich, um mich wissen zu lassen, was der Benutzer in seinem Browser mit Javascript sieht? In diesem Element ist “A”, “B” und “D”.

Geben Sie hier die Bildbeschreibung ein

  • Antworten auf eine ähnliche Frage finden Sie unter http://stackoverflow.com/questions/704758/how-to-check-if-an-element-is-really-visible-with-javascript.

    – Rechnung

    14. Februar 2012 um 4:55 Uhr

Benutzer-Avatar
Shane

Mit dem Folgenden können Sie die Größe des Darstellungsbereichs des Browsers abrufen.

window.innerHeight;
window.innerWidth;

http://bit.ly/zzzVUv – Musste Google Cache verwenden, da die Seite für mich nicht geladen wurde. Originalseite:
http://www.javascripter.net/faq/browserw.htm

Wenn Sie erkennen möchten, wie weit sie auf der Seite nach unten gescrollt haben, können Sie verwenden

window.scrollX;   // Horizontal scrolling
window.scrollY;   // Vertical scrolling

Außerdem habe ich ein Fensterobjekt gefunden – window.screen. Auf meinem System hat es folgende Daten:

window.screen.availHeight = 994;
window.screen.availLeft = 0;
window.screen.availTop = 0;
window.screen.availWidth = 1280;
window.screen.colorDepth = 32;
window.screen.height = 1280;
window.screen.pixelDepth = 32;
window.screen.width = 1280;

Ich hoffe, diese beantworten Ihre Frage ausreichend.

Benutzer-Avatar
Heiter

Versuch es 🙂 http://jsfiddle.net/Aj2fU/5/

$('input').click(function(){
   // check for visible divs with class 'check'   
    $('.check').each(function(){
        var pos = $(this).offset(),
            wX = $(window).scrollLeft(), wY = $(window).scrollTop(),
            wH = $(window).height(), wW = $(window).width(),
            oH = $(this).outerHeight(), oW = $(this).outerWidth();

        // check the edges
        // left, top and right, bottom are in the viewport
        if (pos.left >= wX && pos.top >= wY && 
            oW + pos.left <= wX + wW && oH + pos.top <= wY + wH )
            alert('Div #' + $(this).attr('id') + ' is fully visible');
        else // partially visible   
        if (((pos.left <= wX && pos.left + oW > wX) ||
             (pos.left >= wX && pos.left <= wX + wW)) &&
            ((pos.top <= wY && pos.top + oH > wY)   ||
             (pos.top  >= wY && pos.top  <= wY + wH)))
            alert('Div #' + $(this).attr('id') + ' is partially visible');
        else // not visible 
            alert('Div #' + $(this).attr('id') + ' is not visible');
    });        
});​

Aktualisiert mit sehr breiten divs zu arbeiten. Grundsätzlich wird überprüft, ob die linken, oberen und rechten unteren Ränder der Divs beide im sichtbaren Teil des Bildschirms, teilweise oder außerhalb des Ansichtsfensters liegen.

  • Tolle Antwort, gibt es eine Möglichkeit, dies anzupassen, um die Anzahl der sichtbaren Pixel zu berechnen, wenn ein Element teilweise sichtbar ist? Ich habe hier eine ähnliche Frage gestellt stackoverflow.com/questions/28685693/…

    – tripRev

    23. Februar 2015 um 23:51 Uhr

  • @tripRev kein Problem, scrollen Sie horizontal in der Ansicht, subtrahieren Sie den linken Rand des Objekts – es zeigt an, wie viel des Objekts links verborgen ist. Subtrahieren Sie es von der vollen Breite des Objekts und finden Sie die Differenz zwischen dem Ergebnis und der Breite der Ansicht. Es zeigt an, ob das Objekt vollständig angezeigt wird oder nur ein Teil davon (was offensichtlich die Breite der Ansicht ist). Wiederholen Sie dasselbe für die vertikale Richtung.

    – Fröhlich

    24. Februar 2015 um 23:10 Uhr

Benutzer-Avatar
Sam Sehnert

Grundsätzlich müssten Sie zuerst die Ansichtsfensterabmessungen mithilfe des Fensterobjekts messen, dann müssten Sie alle Elemente durchlaufen, die Sie überprüfen möchten, und berechnen, ob sie passen.

Sieh dir das an jsfiddle zum Beispiel.

Hier ist der Code (für die Nachwelt):

HTML:

<div id="info">
    <p class="wxh"></p>
    <p class="txl"></p>
    <p class="report"></p>
</div>

<h1>A big list!</h1>
<ul></ul>

CSS:

#info{
    position: fixed;
    right: 0px;
    text-align: center;
    background: white;
    border: 2px solid black;
    padding: 10px;
}

JS:

    $(function(){

    $(window).bind('scroll.measure resize.measure',function(){

        // Gather together the window width, height, and scroll position.
        var winWidth = $(window).width(),
            winHeight = $(window).height(),
            winLeft = $(window).scrollLeft(),
            winTop = $(window).scrollTop(),
            winBottom = winTop + winHeight,
            winRight = winLeft + winWidth,
            inView = [];

        // Loop over each of the elements you want to check
        $('.inview').each(function(){

            // Get the elements position and dimentions.
            var pos = $(this).position(),
                width = $(this).outerWidth(),
                height = $(this).outerHeight();

            // Set bottom and right dimentions.
            pos.bottom = pos.top + height;
            pos.right = pos.left + width;

            // Check whether this element is partially within
            // the window's visible area.
            if((
                pos.left >= winLeft &&
                pos.top >= winTop &&
                pos.right <= winRight &&
                pos.bottom <= winBottom
            ) || (
                pos.left >= winLeft && pos.top >= winTop && 
                pos.left <= winRight && pos.top <= winBottom
            ) || (
                pos.right <= winRight && pos.bottom <= winBottom &&
                pos.right >= winLeft && pos.bottom >= winTop
            )){
                // Change this to push the actual element if you need it.
                inView.push( $(this).text() );
            }
        });

        // For the purposes of this example, we only need the
        // first and last element, but in your application you may need all.
        var first = inView.shift(),
            last = inView.pop();

        // Show the details in the info box.
        $('#info .wxh').text( winWidth+' x '+winHeight );
        $('#info .txl').text( winTop+' x '+winLeft );
        $('#info .report').text( 'Showing from '+first+' to '+last );
    });

    // The rest is just setup stuff, to make the area scrollable.
    for( var i=0; i<100; i++ ){
        $('ul').append('<li class="inview">List item '+i+'</li>');
    }

    $(window).trigger('resize.measure');
})    ​

Benutzer-Avatar
Parag Gajjar

Sie können den sichtbaren Bereich des Fensters erhalten, indem Sie

var pwidth = $(window).width();
var pheight = $(window).height();

Dann erhalten Sie eine Dokumentenrolle,

$(document).scroll(function(e) {
       var top = $(this).scrollTop();       
       $("h1").html("total visible area is from:"+ top +" to "+ (pheight + top) +"px");
    });

Vollständiges Beispiel ist hier: http://jsfiddle.net/parag1111/kSaNp/

1246480cookie-checkKann ich den für den Benutzer sichtbaren Bereich im Browser erkennen?

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy