18

コードを最小限に抑えるために jQuery や別のライブラリの使用を避けたいのですが、必要な機能はほとんどありません。ユーザーが一番下までスクロールしたときにリストに追加したいだけです。プレーンなJavascriptでこれを行うにはどうすればよいですか?

4

7 に答える 7

16

基本的には、イベント スクロールをフックし、ユーザーが十分にスクロールしたかどうかを確認し、そうであればコンテンツを追加するだけです。

<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>
于 2011-06-23T16:37:38.670 に答える
1 
domElem.addEventListener(
        'scroll',
        function(evt) { ... },
        false
    );

evt/scroll 位置を適切に処理します。

于 2011-06-23T16:36:47.943 に答える