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

#javascript #jquery

Вопрос:

Я внедряю функцию отложенной загрузки в своем приложении. Он работает должным образом на iPhone, рабочем столе, вкладке. Но не работает на телефоне Android. Ниже приведен мой код для вычисления нижнего —

 $(window).on("scroll", function() {
 var scrollHeight, scrollPosition;
 scrollHeight = $(document).height();
 scrollPosition = $(window).height()   $(window).scrollTop();
 if ((scrollHeight - scrollPosition) / scrollHeight === 0) {
    this.get_data();
 }
});

Я также пробовал приведенный ниже вариант, но все еще не смог вычислить нижний уровень на Android.

 if($(document).height() - $(window).scrollTop() - $(window).height() < 50) {
   this.get_data();
 }

1. @Taplar Я отредактировал код, пожалуйста, проверьте еще раз. На самом деле я делаю это в CoffeeScript и просто преобразовал свой код и добавил сюда, вот почему ключевое слово «return» было их.

2. Это круто, так что все же в качестве дополнительного замечания вам следует рассмотреть возможность кэширования ваших повторяющихся конструкторов jQuery.

Ответ №1:

Вот что, я думаю, происходит:

Когда вы прокручиваете документ до конца в Chrome на Android, он скрывает адресную строку. Это вызывает изменение размера, которое вы не всегда улавливаете, потому что вы не прослушиваете resize событие — просто scroll . На мой взгляд, это довольно глупо на стороне браузера.

В любом случае:

 function update() {
    // ...all your awesome code here
}

$(window).on('resize', update); // look out world, magic happening here
$(window).on('scroll', update);

И, для примера… (Я немного почистил это во время тестирования):

 var $status = $('#status');
var $window = $(window);
var $document = $(document);

function update() {
  var maxScrollTop = $document.height() - $window.height();
  var scrollTop = $window.scrollTop();

  var calc = maxScrollTop - scrollTop;

  if (calc < 50) {
    $status.html('Load more!!');
  } else {
    $status.html(calc);
  }
}

$window.on('scroll', update);
$window.on('resize', update);

 #content {
  height: 2000px;
  background: #eee;
  box-shadow: inset 0 0 0 1px red;
}

#status {
  position: fixed;
  top: 0; left: 0;
  background: #fff;
}

 <meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.slim.min.js"></script>

<div id="content"></div>
<div id="status">Scroll to start</div>

Развернуть фрагмент

Надеюсь, это поможет!!

1. Он по-прежнему не работает на устройстве Android. Проблема не в событии прокрутки, событие прокрутки тоже работает на Android, но я думаю, что проблема в вычислении.

2. @Kalashir Я изначально запустил код через эмулятор и только сегодня утром запустил его на своем собственном устройстве Android — и это работает. Это может быть ошибка, зависящая от устройства или браузера; я использую Chrome на Galaxy. Вот ссылка на CodePen , если вы хотите это протестировать.

Ответ №2:

Я решил эту проблему. На самом деле логика правильная, а не проблема с этим. Но я просмотрел HTML и CSS и узнал, что мой HTML ломается, и из-за этого я получал неправильную scrollTop () и высоту документа.