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”.
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
Shane
Mit dem Folgenden können Sie die Größe des Darstellungsbereichs des Browsers abrufen.
$('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
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.
$(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');
})
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");
});
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