如何捕获滚动事件? [英] How to capture scroll event?

问题描述

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

I want to implement infinite scrolling. Below is a short form of my layout. Since I have some elements relative positioned the javascript scroll event does not fire.

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

How can I fix this problem in order to get the scroll event to be fired and implement the infinite scrolling?

我的主要布局是:

<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;
} 

我必须更改什么才能接收具有布局的浏览器滚动事件以实现无限滚动?

What do I have to change such that I can receive the browser scroll event with my layout to implement infinite scrolling?

推荐答案

实现它的正确方法是:

 <div id="container" onScroll="handleOnScroll();">

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

这篇关于如何捕获滚动事件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！