Ajax Infinite Scroll 适用于桌面设备，但不适用于触摸屏

Question

我无法让这个 ajax 无限滚动在触摸屏或移动单元格上工作 phone。

我一直在尝试使用页眉、内容和页脚 div 计算屏幕大小，但没有任何效果。

如何在页面底部触发功能？

在此处找到了一些示例，但其中 none 个有效。

这就是我现在拥有的，在桌面上工作。

谢谢，

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

var last_id = $(".trailerid:last").attr("id");
                loadMore(last_id);
            }
        });

        function loadMore(last_id){
            $.ajax({
                url: 'loadMore.inc.php?lastTrailerId=' + last_id,
                type: "get",
                beforeSend: function(){
                    $('.ajax-load').show();
                }
            }).done(function(data){
                $('.ajax-load').hide();
                $("#trailerData").append(data);
            }).fail(function(jqXHR, ajaxOptions, thrownError){
                alert('Servern svarar inte...');
            });
        }

    </script>

Answer 1

在 Intersection Observer API 中查看。此 API 旨在检测某些 observed 元素何时进入（和离开）视口。这是比监听滚动事件更高效的选择。

使用 API，您可以在页面底部放置一个元素，我们称此元素为 触发器。每当看到此触发器时，调用 loadMore 函数并将项目添加到列表中。触发器现在应该被推到底部并再次消失。向下滚动以重复此过程。

我在下面做了一个演示，它使用这种技术来模拟 无限滚动 效果。它的工作方式与上述相同。

const list = document.querySelector('.list');
const trigger = document.querySelector('.trigger');

const loadMore = () => {
  const item = document.createElement('div');
  item.className = 'item';
  list.append(item);
}

const handleIntersect = entries => {
  for (const { isIntersecting } of entries) {
    if (isIntersecting) {
      loadMore();
    }
  }
};

const options = {
  root: null,
  rootMargin: '0px',
  treshold: 0
}

const observer = new IntersectionObserver(handleIntersect, options);
observer.observe(trigger);

body {
  margin: 0;
  padding: 0;
  counter-reset: item;
}

.item {
  display: grid;
  place-content: center;
  height: 200vh;
  width: 100vw;
  background-image: linear-gradient(0deg, transparent, black);
}

.item::before {
  counter-increment: item;
  content: counter(item);
  font-size: 32px;
  font-family: sans-serif;
  font-weight: bold;
}

<div class="list">
  <div class="item"></div>
</div>

<div class="trigger"></div>

Ajax Infinite Scroll 适用于桌面设备，但不适用于触摸屏

Ajax Infinite Scroll works on Desktop but not on touchscreen

javascript

ajax