Question

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

的两种方式中都起作用

任何有关此内容或其他信息的建议将不胜感激，谢谢

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

<div>
<img>
</div>

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

Answer 1

不确定是否有更好的方法可以做到这一点，但是我认为一旦div通过视口，您就可以移动它。取决于是否上下滚动，您几乎可以计算出将div移动到何处。就像链式游戏一样，一旦您传递了元素，就将其移至底部或顶部。或者，如果它已经在底部，则将最后一个元素移到顶部，依此类推。这只是一个主意，因此不确定它是否可以与您想要的工作一起使用。

简单/粗糙的示例CodePen

HTML

<div id="body">
  <div id="top">
  </div>
  <div id="middle">
  </div>
  <div id="center">
  </div>
  <div id="bottom">
  </div>
</div>

CSS

body {
  width: 100%;
  margin: 0;
  padding: 0;
  -ms-overflow-style: none;
  overflow: -moz-scrollbars-none;
}

body::-webkit-scrollbar { 
  display: none;
}

#top {
  height: 1250px;
  background: blue;
}

#middle {
  height: 1250px;
  background: red;
}

#center {
  height: 1250px;
  background: pink;
}

#bottom {
  height: 1250px;
  background: green;
}

要检查用户正在向上或向下滚动的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;
}

Answer 2

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

您可以使用窗口上的 onscroll事件来检查用户是否点击了底部并再次动态显示顶部div。

希望有帮助。

无限滚动网页

2 个答案: