Как сделать бесконечный свиток в простом Javascript

Я хочу, чтобы избежать использования jQuery или другой библиотеки, ради того, чтобы мой код был минимальным, мне очень мало нужно на функциях, я просто хочу добавить в список, когда пользователь прокручивается вниз. Как я могу сделать это на простом Javascript?

Ответ 1

В принципе, вам просто нужно зацепить прокрутку события, проверить, достаточно ли прокрутка пользователя и добавить какой-то контент:

<html><body>
<div id="test">scroll to understand</div>
<div id="wrapper" style="height: 400px; overflow: auto;">
  <div id="content"> </div>
</div>

<script language="JavaScript">
  // we will add this content, replace for anything you want to add
  var more = '<div style="height: 1000px; background: #EEE;"></div>';

  var wrapper = document.getElementById("wrapper");
  var content = document.getElementById("content");
  var test = document.getElementById("test");
  content.innerHTML = more;

  // cross browser addEvent, today you can safely use just addEventListener
  function addEvent(obj,ev,fn) {
    if(obj.addEventListener) obj.addEventListener(ev,fn,false);
    else if(obj.attachEvent) obj.attachEvent("on"+ev,fn);    
  }

  // this is the scroll event handler
  function scroller() {
    // print relevant scroll info
    test.innerHTML = wrapper.scrollTop+"+"+wrapper.offsetHeight+"+100>"+content.offsetHeight;

    // add more contents if user scrolled down enough
    if(wrapper.scrollTop+wrapper.offsetHeight+100>content.offsetHeight) {
      content.innerHTML+= more;
    }
  }

  // hook the scroll handler to scroll event
  addEvent(wrapper,"scroll",scroller);
</script>
</body></html>

Ответ 2

Отличный демо-код для бесконечной прокрутки. Это показывает, что вам не нужны jQuery и Angular для работы, независимой от браузера. Но новые парни сегодня не имеют ничего общего с чистым Javascript, которому мы, старые парни, все еще доверяем и используем. Здесь я упростил код:

<html>
<head>
<script language="JavaScript">
// we will add this content, replace for anything you want to add
var wrapper, content, test;
var more = '<div style="height:1000px; background:#EEE;"></div>';

// this is the scroll event handler
function scroller()
{
// print relevant scroll info
test.innerHTML = wrapper.scrollTop + " + " + wrapper.offsetHeight + " + 100 > " + content.offsetHeight;

  // add more contents if user scrolled down enough
  if(wrapper.scrollTop + wrapper.offsetHeight + 100 > content.offsetHeight)
  {
  content.innerHTML += more;  // NK: Here you can make an Ajax call and fetch content to append to content.innerHTML
  }
}
</script>
</head>

<body>
<div id="test">scroll to understand</div>

<div id="wrapper" style="height: 400px; overflow: auto;">
  <div id="content"> </div>
</div>

<script language="JavaScript">
wrapper = document.getElementById("wrapper");
content = document.getElementById("content");
test = document.getElementById("test");

content.innerHTML = more;

// hook the scroll handler to scroll event
    if(wrapper.addEventListener)              // NK: Works on all new browsers
    wrapper.addEventListener("scroll",scroller,false);

    else if(wrapper.attachEvent)            // NK: Works on old IE
    wrapper.attachEvent("onscroll",scroller);
</script>
</body>
</html>

Ответ 3

domElem.addEventListener(
        'scroll',
        function(evt) { ... },
        false
    );

и соответствующим образом отрегулируйте положение evt/scroll.

Ответ 4

Пример фрагмента с поддержкой нескольких браузеров: Read inline comments for how it works

window.onscroll = function(ev) {
    if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
       //User is currently at the bottom of the page
        addNewItem();
    }
};


function addNewItem(){
   var itemCount = document.getElementById("movieList").childElementCount;
const itemLimit = 10; //total number of items to retrieve
//retrieve the next list of items from wherever
var nextTopItems = getNextItemSimulator(itemCount); 
nextTopItems.forEach(function(item) {
//add the items to your view
  document.getElementById("movieList").innerHTML += "<p>"+item+"</p>"; 
     document.getElementById("footer").style.display = "block";
});
setTimeout(function(){
     //remove footer info message
     document.getElementById("footer").style.display = "none";}, 500);
}

function getNextItemSimulator(currentItem){ 
   //Just some dummy data to simulate an api response
const dummyItemCount = 50;
var dummyItems = []; 
var nextTopDummyItems = [];
for(i = 1; i <= dummyItemCount; i++){
//add to main dummy list
    dummyItems.push("Movie " + i);
}
var countTen = 10;
var nextItem = currentItem + 1;
for(i = nextItem; i <= dummyItems.length; i++){
    //get next 10 records from dummy list
    nextTopDummyItems.push(dummyItems[i - 1]);
    countTen--;
    if(countTen == 0)break;
}
   return nextTopDummyItems;
}

#footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    display:none;
    background: #eee;
}

#movieList{
margin-bottom: 20px;
}

<h3> Movies 2019 </h3>

<div id="movieList">
<p>Movie 1</p>
<p>Movie 2</p>
<p>Movie 3</p>
<p>Movie 4</p>
<p>Movie 5</p>
<p>Movie 6</p>
<p>Movie 7</p>
<p>Movie 8</p>
<p>Movie 9</p>
<p>Movie 10</p>
</div>
<div id="footer">Loading more movies</div>

Ответ 5

Я вижу отличные ответы на ваш вопрос, но для прокрутки, которая не связана ни с одним элементом HTML или контентом (просто пустой страницей HTML), вот как я это сделал:

document.querySelector("body").style.height = "1000px";

window.addEventListener("scroll", function() {
    var body = document.querySelector("body");
    var height = body.style.height;
    height = height.slice(0, -2);
    height = Number(height);
    return function() {
        if(height - window.scrollY < 700) {
            height += height / 2;
        }
        body.style.height = height + "px";
    };
}());

<!DOCTYPE html>
<html>
<head>

</head>
<body>

</body>
</html>