Свиток обнаружения JQuery в нижней части

Ответ 1

Для тех, кто смотрит здесь позже, я решил это, добавив height=device-height в тег просмотра meta:

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

Затем вы можете продолжить, используя $(document).scroll(function(){});

Это работало с iOS 5

Ответ 2

Если вы можете, вы действительно должны избегать попытки набрать точный номер.

Используя вышеописанную функцию Stelok, вы можете протестировать следующим образом:

if ($win.height() + $win.scrollTop() > (getDocumentHeight()-10)) {

Это немного мягче - пользователь может не иметь прокрутки до последнего последнего пикселя, но думает, что он внизу.

Ответ 3

Улучшенная версия кода jQuery для кода

var scrollRefresh = {
    pastTop: false,
    pastBottom: false,
    previous: 0,
    bottom: function(callback) {
      var pBottom = $(window).height() + $(window).scrollTop() >= $(document).height();
      if(!this.pastBottom && pBottom) {
        callback($(window).height() + $(window).scrollTop());
        this.pastBottom = true;
      } else {
        if(!pBottom) this.pastBottom = false;
      }
      this.previous = $(window).scrollTop();
    },
    top: function(callback) {
      var pTop = $(window).scrollTop() < this.scrollPrevious && $(window).scrollTop <= 0;
      if(!this.pastTop && pTop) {
        callback($(window).scrollTop());
        this.pastTop = true;
      } else {
        if(!pTop) this.pastTop = false;
      }
      this.previous = $(window).scrollTop();
    }
  }

  $(window).scroll(function() {
    scrollRefresh.top(function(pos) {
      console.log("Loading top. " + pos);
      alert("scrolled to top"); //You should delete this line
    });
    scrollRefresh.bottom(function(pos) {
      console.log("Loading bottom. " + pos);
      alert("scrolled to bottom"); //You should delete this line
    });
  });

Ответ 4

Пуленепробиваемый способ получения высоты документа во всех браузерах:

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

Ответ 5

Это то, что сработало для меня:

(window.innerHeight + window.scrollY) == $(document).height()

Найдено здесь: Javascript: как определить, прокручивается ли окно браузера снизу?

Ответ 6

Использование jquery и Strelok getDocumentHeight() ниже (приветствия!) Я обнаружил, что следующее работает очень хорошо. Тестирование на равенство не работало для меня, поскольку iPhone только зарегистрировал значение прокрутки в конце слайда, которое было на самом деле больше высоты документа:

$(window).scroll(function () {
  var docHeight = getDocumentHeight();         
  if ($(window).scrollTop() + $(window).height() >= docHeight) {
    // Do stuff
  }
});

Ответ 7

Добавлен ли метатег для iphones, который устанавливает размер содержимого в область просмотра телефона?

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">

EDIT:

Итак, я попробовал это на своем телефоне (андроид, пряники), и проблема была не столько в том, что код не работал, а в том, что отображаемый контент не заставляет прокручивать страницу. Как только я увеличил масштаб и прокрутил вниз более динамически загруженный контент. Вы можете попробовать добавить контент до тех пор, пока содержимое не будет больше $(window).height();

Ответ 8

вы также можете использовать бесконечный плагин прокрутки: https://github.com/fredwu/jquery-endless-scroll https://github.com/paulirish/infinite-scroll

Я использую бесконечный свиток, и он отлично работает на моем ноутбуке и iphone.

Ответ 9

Вот совокупность других ответов, которые очень хорошо работают для меня. Он может быть написан как плагин jQuery когда-нибудь.

// Handles scrolling past the window up or down to refresh or load more data.
var scrolledPastTop = false;
var scrolledPastBottom = false;
var scrollPrevious = 0;

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

function bottomScrollRefresh(callback) {
  var pastBottom = $window.height() + $window.scrollTop() > getDocumentHeight();
  if(!scrolledPastBottom && pastBottom) {
    callback($window.height() + $window.scrollTop());
    scrolledPastBottom = true;
  } else {
    if(!pastBottom) scrolledPastBottom = false;
  }
  scrollPrevious = $window.scrollTop();
}

function topScrollRefresh(callback) {
  var pastTop = $window.scrollTop() < scrollPrevious && $window.scrollTop() <= 0;
  if(!scrolledPastTop && pastTop) {
    callback($window.scrollTop());
    scrolledPastTop = true;
  } else {
    if(!pastTop) scrolledPastTop = false;
  }
  scrollPrevious = $window.scrollTop();
}

Чтобы использовать это в своем коде, добавьте что-то вроде этого:

window.onscroll = function() {
  topScrollRefresh(function(pos) {
      console.log("Loading top. " + pos);
  });
  bottomScrollRefresh(function(pos) {
    console.log("Loading bottom. " + pos);
  });
};

Отлично подходит для моего приложения PhoneGap/Cordova.

Ответ 10

Хотя вопрос был задан 5 лет назад, все же это более чем актуально в сегодняшнем контексте UI/UX. И я хотел бы добавить свои два цента.

var element = document.getElementById('flux');
if (element.scrollHeight - element.scrollTop === element.clientHeight)
{
    // element is at the end of its scroll, load more content
}

Источник: https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight#Determine_if_an_element_has_been_totally_scrolled