如何使用 Infinite Scroll With Django 滚动到特定元素？

Posted 2023-05-07

【中文标题】如何使用 Infinite Scroll With Django 滚动到特定元素？

【英文标题】：How to scroll to specific element using the Infinite Scroll With Django?

【发布时间】：2020-01-26 07:55:26

【问题描述】：

当我最初加载页面时，它加载了 10 个项目（1,2,3...10），向下滚动后我又得到了 10 个项目（11,12,13,...20）。但我需要直接滚动到第 12 个元素。我正在使用 Waypoint 无限滚动（JQuery）和 Django 分页。

jquery：

  $(document).ready(function() 
      $('html, body').animate(
     scrollTop: $("#2").offset().top
     , 'slow');
  );

//航路点代码：

  var infinite = new Waypoint.Infinite(
  element: $('.infinite-container')[0],
  context: document.getElementById('#16'),
  onBeforePageLoad: function() 
  $('.loading').show();
   ,
  onAfterPageLoad: function($items) 
  $('.loading').hide();
  
  );

同时通过触发调用向下滚动来自 Django 分页的数据：

http://localhost:8000/polls/?page=2&type=testpoll

最初加载页面时，我需要滚动到“page=2”中的一个元素。我该怎么做？

【问题讨论】：

使用滚动到页面末尾的 setInterval 等待新项目加载查找元素 12，如果它发现它明确的间隔，否则继续查找。不过，那将是一个非常愚蠢的解决方案。另一个想法是搜索第 12 项，使其最终出现在您的列表顶部

@joyBlanks 我尝试使用 SetInterval 滚动。但如果没有找到第 16 个元素，它会滚动到页面底部。

这就是为什么我提到它听起来有点尴尬。你在第 2 页上显示 12 的意图是什么你怎么知道它的第 2 页。你需要问为什么如果加载并且用户想要查看第 12 页，为什么不滚动到第 2 页为什么不立即带上第 12 项？这些是您需要理顺的业务需求

@joyBlanks 元素 12 可以出现在任何页面上。

实际上你需要问正确的问题说你想看的帖子 12。你是怎么做的，你在搜索栏上搜索它，而不是通过无限滚动器来显示它。你知道我想说什么吗？

【参考方案1】：

我尝试使用 SetInterval 滚动。但如果没有找到第 16 个元素，它会滚动到页面底部。

if($("#16").length === 0)
    myVar =  setInterval(function() 
    $("html, body").animate( scrollTop: 
    $(document).height()-$(window).height());
    if($("#16").length !== 0)
        clearInterval(myVar);
        next = $(".infinite-item").parent().next().find($('#16'));
        $('html, body').animate(scrollTop: $('#16').offset().top, 'slow');
      
    , 1000);

  
);