0

ユーザーがスクロール可能なページ上の特定のdivをドラッグしたときに、関数を呼び出そうとしています。以下は私のために働いていません：

document.addEventListener("scroll", scroll, false);
$("#content").on("scroll", scroll, false);
$(document).on("scroll", scroll, false);

function scroll(){
    alert("scrolled");
}

私がスクロールをキャプチャしようとしているdivはです#content。上記のいずれかが機能すると思いましたが、エラーは発生せず、正しいとは言えません。

最初のものはまったく実行scrollされません。2つ目は、ユーザーがスクロールしているときに、最後ではなく関数を呼び出します。そして3つ目は、body要素の関数のみを呼び出します。

これがデモです：http ：//www.codekraken.com/snow/app_testing/test2.html

完全なコード：

$(document).ready(function () {



    var extra = $("#content").height() - $("#list").height();
    if (extra > 0) {
        $("#list").css("margin-bottom", extra);
    }
    $("#content").scrollTop("50");

    var removeTransition = function () {
        content.style['-webkit-transition-duration'] = 0;
    };
    content = document.getElementById('content');
    pullToRefresh = document.getElementById('pull_to_refresh');
    refreshing = document.getElementById('refreshing');

    function success(callback) {
        // simulate a network request that takes 2 seconds
        window.setTimeout(function () {
            var l = document.getElementById('list');
            for (var i = 0; i < 5; i++) { // insert 5 new items
                var li = document.createElement('li');
                li.innerHTML = 'List Item ' + Math.floor(Math.random() * 100);
                li.style.opacity = 0;
                l.insertBefore(li, l.firstChild);
            }
            window.setTimeout(function () {
                for (var i = 0; i < 5; i++) {
                    l.children[i].style.opacity = 1;
                }
            }, 0);
            callback(); // pull callback when finished
        }, 2000);
    }

    function start() {
        console.log('start');
    }

    function cancel() {
        console.log('cancel');
    }
    $("#content").on('scroll', function (e) {
        var test = $("#list li").eq(1).offset().top - $("#list li").outerHeight();
        if (test > 0) {
            $("#content").scrollTop("50");
        }
    });
    document.getElementById('content').addEventListener('touchend', function (e) {
        if (refresh) {
            content.style['-webkit-transition-duration'] = '.5s';
            $("#content").scrollTop("0");
            pullToRefresh.style.display = 'none';
            refreshing.style.display = '';
            success(function () { // pass down done callback
                pullToRefresh.style.display = '';
                refreshing.style.display = 'none';
                $("#content").scrollTop("50");
                content.addEventListener('transitionEnd', removeTransition);
            });
            refresh = false;
        } else {
            content.style['-webkit-transition-duration'] = '.25s';
            $("#content").scrollTop("50");
            content.addEventListener('transitionEnd', removeTransition);
            cancel();
        }
    });
    document.getElementById('content').addEventListener('touchmove', function (e) {
        var test = $("#list li").eq(1).offset().top - $("#list li").outerHeight();
        if (test === 0) {
            refresh = true;
        } else {
            refresh = false;
        }
    });
    document.getElementById('content').onscroll = function(){
        alert("test");
    };
});
4

1 に答える 1

2

私が理解しているように、ユーザーがいつスクロールを停止したかを知りたいですか? もしそうなら、私は次のことを試します。

var timeoutId = null;
$("#content").on("scroll", scroll, false);

function scroll(){
    if(timeoutId != null){
        clearTimeout(timeoutId);
    }
    timeoutId = setTimeout("scrollEnd()", 100);
}

function scrollEnd(){
    timeoutId = null;
}

次に、ユーザーが 100ms 滞在したときに関数 scrollEnd が呼び出されます。

于 2012-12-09T23:59:38.193 に答える