Javascript 无限滚动网页

我想实现的是，一旦用户滚动到最后一个div（“底部”）的底部（本质上是网页的底部），他们可以继续向下滚动，第一个div（“顶部”）将从底部出现，并重置从顶部滚动 理想情况下，这将以两种方式工作，基本上创建无限的上下滚动

如果您对这项服务或其他信息有任何建议，我们将不胜感激，谢谢

<div class="top">
<img>
</div>

<div>
<img>
</div>

<div class="bottom">
<img>
</div>

---

如果我理解正确，当用户到达底部div（页面末尾）时，您不希望页面回滚到顶部，对吗？ 您希望顶部div在底部div之后再次渲染，对吗

您可以使用窗口上的onscroll事件检查用户是否点击底部，并再次以友好方式渲染顶部div

---

希望这会有所帮助。

如果我理解正确，当用户到达底部div（页面末尾）时，您不希望页面回滚到顶部，对吗？ 您希望顶部div在底部div之后再次渲染，对吗

您可以使用窗口上的onscroll事件检查用户是否点击底部，并再次以友好方式渲染顶部div

---

希望这会有所帮助。

不确定是否有更好的方法来实现这一点，但我认为您可以在div通过查看端口后移动它。根据您是否上下滚动，您几乎可以计算出将div移动到何处。这就像一个链式游戏，一旦你通过了元素，将其移动到底部或顶部。或者，如果已在底部，则将最后一个元素移动到顶部，依此类推。这只是一个想法，所以不确定它是否适合你想做的事情

简单/粗略示例

HTML

JS检查用户是否向上或向下滚动，并检查元素是否在视图端口中

var divs = ['#top', '#middle', '#center', '#bottom'];

var current = '#top';
var next = '#center';

$('#body').on('DOMMouseScroll mousewheel', function (e) {
  if(e.originalEvent.detail > 0 || e.originalEvent.wheelDelta < 0 ) {
    // Scrolling down
    if(!inScreen(current) && inScreen(next)) {
      $('#body').append($(current));
      current = divs[getNextIndex(current)];
      next = divs[getNextIndex(next)];
    }
  } else { // Scrolling up
    if(!inScreen(divs[getNextIndex(current)]) && inScreen(current)) {
      $('#body').prepend($(divs[getPrevIndex(current)]));
      current = divs[getPrevIndex(current)];
    }
  }
});

// Function to check if element is in view port
var inScreen = function (elem) {
  let elem_top = $(elem).offset().top;
  let elem_bottom = elem_top + $(elem).outerHeight();
  let window_top = $(window).scrollTop();
  let window_bottom = window_top + $(window).height();

  return elem_bottom > window_top && elem_top < window_bottom;
};

// Function to get next index if last index then get the first one
var getNextIndex = function (item) {
  let idx = divs.findIndex(divs => divs === item);

  if((divs.length - 1) == idx) {
    idx = 0;
  } else {
    idx++;
  }

  return idx;
}

// Function to get previous index if first index then get the last one
var getPrevIndex = function (item) {
  let idx = divs.findIndex(divs => divs === item);

  if(0 == idx) {
    idx = divs.length - 1;
  } else {
    idx--;
  }
  return idx;
}

var divs=['顶部'，'中间'，'中心'，'底部']；
var电流='#顶部'；
var next='#center'；
$（'#body'）。在（'DOMMouseScroll mousewheel'，函数（e）上{
如果（e.originalEvent.detail>0 | | e.originalEvent.wheelDelta<0）{
//向下滚动
如果（！屏幕内（当前）和屏幕内（下一个））{
$（'#body'）。追加（$（当前））；
当前=divs[getNextIndex（当前）]；
next=divs[getNextIndex（next）]；
}
}else{//向上滚动
如果（！屏幕显示（divs[getNextIndex（当前）]和屏幕显示（当前））{
$（'#body'）。前置（$（divs[getPrevIndex（当前）]）；
当前=divs[getPrevIndex（当前）]；
}
}
});
//用于检查元素是否在视图端口中的函数
屏幕变量=功能（要素）{
设elem_top=$（elem）.offset（）.top；
让elem_bottom=elem_top+$（elem）.outerHeight（）；
让window_top=$（window.scrollTop（）；
让window_bottom=window_top+$（window）.height（）；
返回元素底部>窗口顶部和元素顶部<窗口底部；
};
//函数获取下一个索引，如果是上一个索引，则获取第一个索引
var getNextIndex=函数（项）{
设idx=divs.findIndex（divs=>divs==item）；
if（（divs.length-1）==idx）{
idx=0；
}否则{
idx++；
}
返回idx；
}
//函数获取上一个索引，如果是第一个索引，则获取最后一个索引
var getPrevIndex=函数（项）{
设idx=divs.findIndex（divs=>divs==item）；
如果（0==idx）{
idx=divs.length-1；
}否则{
idx-；
}
返回idx；
}

不确定是否有更好的方法来实现这一点，但我认为您可以在div通过视图端口后移动它。根据您是否上下滚动，您几乎可以计算出将div移动到何处。这就像一个链式游戏，一旦你通过了元素，将其移动到底部或顶部。或者，如果已在底部，则将最后一个元素移动到顶部，依此类推。这只是一个想法，所以不确定它是否适合你想做的事情

简单/粗略示例

HTML

JS检查用户是否向上或向下滚动，并检查元素是否在视图端口中

var divs = ['#top', '#middle', '#center', '#bottom'];

var current = '#top';
var next = '#center';

$('#body').on('DOMMouseScroll mousewheel', function (e) {
  if(e.originalEvent.detail > 0 || e.originalEvent.wheelDelta < 0 ) {
    // Scrolling down
    if(!inScreen(current) && inScreen(next)) {
      $('#body').append($(current));
      current = divs[getNextIndex(current)];
      next = divs[getNextIndex(next)];
    }
  } else { // Scrolling up
    if(!inScreen(divs[getNextIndex(current)]) && inScreen(current)) {
      $('#body').prepend($(divs[getPrevIndex(current)]));
      current = divs[getPrevIndex(current)];
    }
  }
});

// Function to check if element is in view port
var inScreen = function (elem) {
  let elem_top = $(elem).offset().top;
  let elem_bottom = elem_top + $(elem).outerHeight();
  let window_top = $(window).scrollTop();
  let window_bottom = window_top + $(window).height();

  return elem_bottom > window_top && elem_top < window_bottom;
};

// Function to get next index if last index then get the first one
var getNextIndex = function (item) {
  let idx = divs.findIndex(divs => divs === item);

  if((divs.length - 1) == idx) {
    idx = 0;
  } else {
    idx++;
  }

  return idx;
}

// Function to get previous index if first index then get the last one
var getPrevIndex = function (item) {
  let idx = divs.findIndex(divs => divs === item);

  if(0 == idx) {
    idx = divs.length - 1;
  } else {
    idx--;
  }
  return idx;
}

var divs=['顶部'，'中间'，'中心'，'底部']；
var电流='#顶部'；
var next='#center'；
$（'#body'）。在（'DOMMouseScroll mousewheel'，函数（e）上{
如果（e.originalEvent.detail>0 | | e.originalEvent.wheelDelta<0）{
//向下滚动
如果（！屏幕内（当前）和屏幕内（下一个））{
$（'#body'）。追加（$（当前））；
当前=divs[getNextIndex（当前）]；
next=divs[getNextIndex（next）]；
}
}else{//向上滚动
如果（！屏幕显示（divs[getNextIndex（当前）]和屏幕显示（当前））{
$（'#body'）。前置（$（divs[getPrevIndex（当前）]）；
当前=divs[getPrevIndex（当前）]；
}
}
});
//用于检查元素是否在视图端口中的函数
屏幕变量=功能（要素）{
设elem_top=$（elem）.offset（）.top；
让elem_bottom=elem_top+$（elem）.outerHeight（）；
让window_top=$（window.scrollTop（）；
让window_bottom=window_top+$（window）.height（）；
返回元素底部>窗口顶部和元素顶部<窗口底部；
};
//函数获取下一个索引，如果是上一个索引，则获取第一个索引
var getNextIndex=函数（项）{
设idx=divs.findIndex（divs=>divs==item）；
if（（divs.length-1）==idx）{
idx=0；
}否则{
idx++；
}
返回idx；
}
//函数获取上一个索引，如果是第一个索引，则获取最后一个索引
var getPrevIndex=函数（项）{
设idx=divs.findIndex（divs=>divs==item）；
如果（0==idx）{
idx=divs.length-1；
}否则{
idx-；
}
返回idx；
}

感谢您的回复，此代码似乎不适用work@Sasha.Burger你是说那支笔吗？或者代码在您的情况下不起作用？这非常有效！非常感谢。是否可以以相同的方式在#top和#bottom div id之间添加其他div？是的，但这是您需要执行一些逻辑以将div附加到底部或顶部的地方。例如，如果向下滚动，则将刚刚经过的div移动到底部。但是，如果您突然向上滚动，那么最后一个div应该附加到顶部。@girl我更新了我的答案和笔。我没有测试我自己

var divs = ['#top', '#middle', '#center', '#bottom'];

var current = '#top';
var next = '#center';

$('#body').on('DOMMouseScroll mousewheel', function (e) {
  if(e.originalEvent.detail > 0 || e.originalEvent.wheelDelta < 0 ) {
    // Scrolling down
    if(!inScreen(current) && inScreen(next)) {
      $('#body').append($(current));
      current = divs[getNextIndex(current)];
      next = divs[getNextIndex(next)];
    }
  } else { // Scrolling up
    if(!inScreen(divs[getNextIndex(current)]) && inScreen(current)) {
      $('#body').prepend($(divs[getPrevIndex(current)]));
      current = divs[getPrevIndex(current)];
    }
  }
});

// Function to check if element is in view port
var inScreen = function (elem) {
  let elem_top = $(elem).offset().top;
  let elem_bottom = elem_top + $(elem).outerHeight();
  let window_top = $(window).scrollTop();
  let window_bottom = window_top + $(window).height();

  return elem_bottom > window_top && elem_top < window_bottom;
};

// Function to get next index if last index then get the first one
var getNextIndex = function (item) {
  let idx = divs.findIndex(divs => divs === item);

  if((divs.length - 1) == idx) {
    idx = 0;
  } else {
    idx++;
  }

  return idx;
}

// Function to get previous index if first index then get the last one
var getPrevIndex = function (item) {
  let idx = divs.findIndex(divs => divs === item);

  if(0 == idx) {
    idx = divs.length - 1;
  } else {
    idx--;
  }
  return idx;
}