Question

我想实现无限滚动。以下是我的布局的简短形式。由于我有一些相对定位的元素，因此javascript滚动事件不会触发。

如何解决此问题以便触发滚动事件并实现无限滚动？

我的主要布局是：

<div id="container">
    <div class="wrapper">
        <div id="header">
        ...
        </div> <%-- header --%>

        <div id="main">
        ...
        </div>

    </div> <%-- wrapper --%>
</div> <%-- container --%>
<div id="footer">
</div>

我的CSS是：

#container {
    position: absolute;
    z-index: 1;
    top: 0;
    bottom: 35px;
    left: 0;
    right: 0;
    overflow-y: auto;      
    overflow-x: hidden;      
}

.wrapper {
    margin: 0 auto;
    width: 960px;
    position: relative;
}   

#header {
    position: relative;
}

#main {
}

#footer {
    z-index: 2;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 35px;
}

我需要更改哪些内容才能使用我的布局接收浏览器滚动事件以实现无限滚动？

Answer 1

实现它的正确方法是：

 <div id="container" onscroll="Onscrollfnction();">

<script>
function Onscrollfnction() {
        alert("scroll");
    };
</script>

Answer 2

编辑：由于您使用jquery标记了您的问题...

使用jQuery捕获scroll事件...

HTML：

<div id="container">
    CONTENT
</div>

jQuery：

$(document).ready(function() {

    $('#container').scroll(function() {
        alert('scroll');
        // presumably your infinite scrolling code here
    });

});

请参阅：http://api.jquery.com/scroll/

Answer 3

这就是我在代码中使用的内容......

 <div id="DataDiv" style="overflow: auto; width: 280px; height:400px; margin-top: 10px;"
                    onscroll="Onscrollfnction();">
      my content here 
 </div>

功能如下

function Onscrollfnction() {
            var div = document.getElementById('DataDiv');
            div.scrollLeft;
            return false;
        };

内容越过400px后，滚动将开始并且将是无限的.. 享受

如何捕捉滚动事件？

3 个答案: