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

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

9 голосов
/ 23 июня 2011

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

Ответы [ 3 ]

9 голосов
/ 23 июня 2011

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

<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 голосов
/ 11 июня 2018

Отличный демонстрационный код для бесконечной прокрутки.Это показывает, что вам не нужны 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>
1 голос
/ 23 июня 2011 
domElem.addEventListener(
        'scroll',
        function(evt) { ... },
        false
    );

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

...