jQuery Detect Bottom of Page op Mobile Safari/iOS

Ik wil eigenlijk dezelfde functionaliteit als Facebook, Twitter en al die andere "oneindige" scroll-sites werken, de code die ik op dit moment gebruik is

jQuery(document).ready(function(){
    $ = jQuery;
        $(window).scroll(function(){
            if ($('.iosSlider').is(':visible'))
            {
                if($(window).scrollTop() + $(window).height() == $(document).height())
                {
                $.get('/our-work/fakework.php', function(data) {
                $('#mobile-thumbs').append(data);
                });
                }
             }
        });
});

Dit werkt perfect op alle browservencils op de desktop, en zelfs op mijn BlackBerry werkt het soms na spammen op de schuifknop omlaag.

Hoewel het niet een keer op de iPhone of iPad is gedetecteerd, ging ik ervan uit dat het iets met het kijkvenster was, maar wie weet.

Ik heb geprobeerd de viewport height-methode van te gebruiken

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0">

maar dit leek het ook niet te repareren!

Dus alsjeblieft, kan iemand er wat licht over zeggen alsjeblieft over hoe de onderkant van de pagina op de iDevices te detecteren!

Bedankt!!

Owen

 6
toegevoegd
Bekeken: 3
de bron
ja ru fr de ar

3 antwoord

Na eeuwenlang foutopsporing vond ik dat

if($(window).scrollTop() + $(window).height() == $(document).height())

werd nooit echt ontmoet, nou het werd wel gehaald maar het lijkt erop dat mobiele safari geen JavaScript uitvoert terwijl de viewport beweegt.

Dit betekent dat tenzij u de scroll PRECIES op de hoogte van het document stopt (geen springerig bodemgegeven), het zeer ONWAARSCHIJNLIJK is dezelfde hoogte te bereiken.

Dus veranderde ik eenvoudig de code in plaats van dezelfde hoogte te evenaren, om te controleren of deze gelijk was of meer, op deze manier zou deze triggeren zelfs als er voorbij was geschoven!

dus de oplossing is hieronder

if($(window).scrollTop() + $(window).height() >= $(document).height()){

dus de gewijzigde code ziet er nu uit

jQuery(document).ready(function(){
    $ = jQuery;
        $(window).scroll(function(){
            if ($('.iosSlider').is(':visible'))
            {
                if($(window).scrollTop() + $(window).height() >= $(document).height())
                {
                $.get('/our-work/fakework.php', function(data) {
                $('#mobile-thumbs').append(data);
                });
                }
             }
        });
});

en het werkt nu als een charme!

9
toegevoegd
de bron

Ik had hetzelfde probleem. Het codefragment werkt prima op desktops maar niet op mobiele iOS-apparaten. Na het vervangen van document door body was het probleem verholpen. Het is ook beter om te controleren of u bijna onderaan het scherm staat:

if($(window).scrollTop() + $(window).height() > $('body').height() - 200)
1
toegevoegd
de bron

Volledig werkende multibrowser- en multidevice-compatibele oplossing:

function getDocumentHeight() {
return Math.max(
    Math.max(document.body.scrollHeight, document.documentElement.scrollHeight),
    Math.max(document.body.offsetHeight, document.documentElement.offsetHeight),
    Math.max(document.body.clientHeight, document.documentElement.clientHeight)
);
}

En dan....

$(window).scroll(function() {
     var docHeight = getDocumentHeight();
     if($(window).scrollTop() + window.innerHeight == docHeight)
                 {
                     //enter your code here
                 }
        });

Vergeet ook de viewport-meta niet:

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
0
toegevoegd
de bron