Как “нащупать дно” (отследить момент касания конца страницы) при скроллинге на мобильном устройстве?

#javascript #jquery #scroll #мобильная_разработка

Подобная конструкция работает только для стационарной версии:

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


Моб. устройства просто не понимают, что ты достиг конца страницы при скроллинге...
Задумка проста: нужно при скроллинге до низа страницы подгружать контент на манер
бесконечной подгрузки контента.

Каким образом можно "словить" этот момент?
    

Ответы

Ответ 1

Запускал локальный сервер с помощью Gulp, на компе брузер Chrome работает, на мобилке
браузер Safari на Iphone7 работает. 



$(window).on('scroll', function(e){
    if ($('html, body').scrollTop()+$(window).height() == document.documentElement.scrollHeight) {
        $('body').append('
lorem lorem lorem lorem lorem lorem
lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem
lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem
lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem
lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem
lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem
lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem
lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem
lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem
lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem
lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem
lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem
lorem lorem lorem 
')
    }
});
p{
  color: coral;
}

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim voluptate ex unde.
Ex tenetur veniam dolores enim, tempore deserunt provident. Suscipit non quaerat blanditiis
impedit, voluptatibus mollitia odio voluptates sequi. Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Nulla, qui ratione vel ullam saepe odio, eveniet sapiente quas libero
cum ipsa, minus a magni. Atque, vitae ipsum nihil facilis earum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim voluptate ex unde.
Ex tenetur veniam dolores enim, tempore deserunt provident. Suscipit non quaerat blanditiis
impedit, voluptatibus mollitia odio voluptates sequi. Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Nulla, qui ratione vel ullam saepe odio, eveniet sapiente quas libero
cum ipsa, minus a magni. Atque, vitae ipsum nihil facilis earum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim voluptate ex unde.
Ex tenetur veniam dolores enim, tempore deserunt provident. Suscipit non quaerat blanditiis
impedit, voluptatibus mollitia odio voluptates sequi. Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Nulla, qui ratione vel ullam saepe odio, eveniet sapiente quas libero
cum ipsa, minus a magni. Atque, vitae ipsum nihil facilis earum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim voluptate ex unde.
Ex tenetur veniam dolores enim, tempore deserunt provident. Suscipit non quaerat blanditiis
impedit, voluptatibus mollitia odio voluptates sequi. Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Nulla, qui ratione vel ullam saepe odio, eveniet sapiente quas libero
cum ipsa, minus a magni. Atque, vitae ipsum nihil facilis earum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim voluptate ex unde.
Ex tenetur veniam dolores enim, tempore deserunt provident. Suscipit non quaerat blanditiis
impedit, voluptatibus mollitia odio voluptates sequi. Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Nulla, qui ratione vel ullam saepe odio, eveniet sapiente quas libero
cum ipsa, minus a magni. Atque, vitae ipsum nihil facilis earum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim voluptate ex unde.
Ex tenetur veniam dolores enim, tempore deserunt provident. Suscipit non quaerat blanditiis
impedit, voluptatibus mollitia odio voluptates sequi. Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Nulla, qui ratione vel ullam saepe odio, eveniet sapiente quas libero
cum ipsa, minus a magni. Atque, vitae ipsum nihil facilis earum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim voluptate ex unde.
Ex tenetur veniam dolores enim, tempore deserunt provident. Suscipit non quaerat blanditiis
impedit, voluptatibus mollitia odio voluptates sequi. Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Nulla, qui ratione vel ullam saepe odio, eveniet sapiente quas libero
cum ipsa, minus a magni. Atque, vitae ipsum nihil facilis earum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim voluptate ex unde.
Ex tenetur veniam dolores enim, tempore deserunt provident. Suscipit non quaerat blanditiis
impedit, voluptatibus mollitia odio voluptates sequi. Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Nulla, qui ratione vel ullam saepe odio, eveniet sapiente quas libero
cum ipsa, minus a magni. Atque, vitae ipsum nihil facilis earum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim voluptate ex unde.
Ex tenetur veniam dolores enim, tempore deserunt provident. Suscipit non quaerat blanditiis
impedit, voluptatibus mollitia odio voluptates sequi. Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Nulla, qui ratione vel ullam saepe odio, eveniet sapiente quas libero
cum ipsa, minus a magni. Atque, vitae ipsum nihil facilis earum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim voluptate ex unde.
Ex tenetur veniam dolores enim, tempore deserunt provident. Suscipit non quaerat blanditiis
impedit, voluptatibus mollitia odio voluptates sequi. Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Nulla, qui ratione vel ullam saepe odio, eveniet sapiente quas libero
cum ipsa, minus a magni. Atque, vitae ipsum nihil facilis earum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim voluptate ex unde.
Ex tenetur veniam dolores enim, tempore deserunt provident. Suscipit non quaerat blanditiis
impedit, voluptatibus mollitia odio voluptates sequi. Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Nulla, qui ratione vel ullam saepe odio, eveniet sapiente quas libero
cum ipsa, minus a magni. Atque, vitae ipsum nihil facilis earum.


Ответ 2

if (/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent)) {
$(window).scroll(function() {
    var crntHeight = $(this).children("#place").height();
    if($(this).scrollTop() >= (crntHeight - $(this).height()-100)){
... {ajax} ...


Примерно такая конструкция работает на мобильном. Правда не идеально.
Может быть есть у кого-то наработки?