10

無限スクロールを実装したい。以下は私のレイアウトの短い形式です。いくつかの要素が相対的に配置されているため、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;
}

無限スクロールを実装するために、レイアウトでブラウザースクロールイベントを受信できるようにするには、何を変更する必要がありますか？

4

3 に答える 3

18

それを実装する正しい方法は次のとおりです。

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

<script>
function handleOnScroll() {
        alert("scroll");
    };
</script>
于 2012-11-28T00:01:11.040 に答える
8

編集：あなたは最初にで質問にタグを付けたので...

scrolljQueryを使用してイベントをキャプチャするには...

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/

于 2012-11-28T00:17:16.507 に答える
4

これは私が私のコードで使用したものです...

 <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を超えると、スクロールが開始され、無限になります。お楽しみください

于 2012-11-21T12:02:45.747 に答える