Question

我正在尝试在用户拖动可滚动的页面上的特定div时调用函数。以下内容对我不起作用：

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

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

我试图捕捉滚动的div是#content。我认为上面的其中一个会起作用，但它们不会产生任何错误，也不会被称为正确。

第一个根本不运行scroll。第二个在用户滚动时调用该函数，而不是在结束时调用。第三个只调用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");
    };
});

Answer 1

根据我的理解，你想知道用户什么时候停止滚动？如果是这样，我会尝试以下。

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。

最后没有调用iOS滚动事件？

1 个答案: