JS / Knockout Endless Scrolling - 滚动条跳到页面顶部

时间:2012-06-19 14:49:41

标签: javascript knockout.js scroll infinite-scroll

所以我有一大堆用js编写的代码,它或多或少地检查滚动条相对于文档/窗口大小的位置。如果它靠近底部,它将触发函数调用。

在我开始编写实际加载当前显示数据下方的额外页面/数据的函数之前,一切都很顺利。

以下是目前在加载额外数据的函数中所写的内容:

var appendData = function () {
    _loading(true);
    spinner.spin(spinnerTarget);
    FC.WebAPI.RouteTemplates.GetTemplates({ "criteria": _searchTerm(), "pageNumber": dataGridViewModel.currentPage(), "pageSize": dataGridViewModel.pageSize(), "filter": Filter.toODataString(filterViewModel.selectedFilters()), "orderBy": _getSortODataString() }).execute(function (response) {
        _data.concat(response.Results);
        spinner.stop();
        _loading(false);
        if (_searchTerm().trim() != "") {
            setTimeout(function () {
                var terms = _searchTerm().split();
                for (var i = 0; i < terms.length; i++) {
                    $('.routedetails span').highlight(terms[i]);
                }
            }, 200);
        }

    }, function (fail) {
        spinner.stop();
        _loading(false);
    });
}

在实现无限滚动功能之前,这被用作一个简单的Next按钮,并且为了将所有内容保存在同一页面而不是加载新的,我们添加了

_data.concat(response.Results);

每当函数被调用时,它似乎都会将滚动条跳到屏幕顶部而不是保持相同的位置,或多或少。不确定为什么会这样做?

1 个答案:

答案 0 :(得分:0)

我遇到过这个问题一次,这是因为屏幕顶部有一个控件有焦点。我在加载页面过程中在该控件上调用了$(element).blur(),问题就消失了。