Kendo UI 和 jquery scrollTop 在 ios 和 android 浏览器上无法正常工作答案

【问题标题】：Kendo UI and jquery scrollTop not working correctly on ios and android browsersKendo UI 和 jquery scrollTop 在 ios 和 android 浏览器上无法正常工作
【发布时间】：2013-06-16 20:05:11
【问题描述】：

在使用剑道ui-grid控件时，发现重置数据源并不会自动将grids滚动位置重新定位到顶部。

这可能是预期的行为，因此在刷新数据源后，我添加了一个调用 jquery scrollTop(0)。这适用于桌面浏览器，但不适用于 iPad。

$("#switch-data-btn").on("click", function(){ 
    grid.dataSource.data(currentData);
    grid.dataSource.transport.data = currentData;
    grid.content.scrollTop(0);
    grid.refresh();
});

http://jsfiddle.net/BFAnK/6/

然后我决定去核，而不是刷新网格数据，我破坏并重建网格。这样做时，我不再需要 scrollTop(0) 调用，一切都很好。

$("#switch-data-btn").on("click", function() {
  buildGrid(currentData); 
  // buildGrid() destroys the grid, empties the dom element and recreates it.
});

http://jsfiddle.net/BFAnK/11/

上述解决方案并不理想，但适用于有限的场景。但是，一旦您引入了一个场景，您希望网格使用 scrollTop() 向下滚动到特定位置，iPad 行为就会滚动到该位置，但会阻止您向上滚动以查看并粘贴较早的结果（但适用于桌面浏览器）。

$("#switch-data-btn").on("click", function() {
  buildGrid(currentData);
  grid.content.scrollTop(50);
});

http://jsfiddle.net/BFAnK/12/

关于如何有效地将数据重新加载到现有剑道 gri 并滚动到适用于 IE9+、Chrome、Firefox 以及 iOS 和 Android 浏览器的所需位置的任何想法？

【问题讨论】：

标签： javascript kendo-ui kendo-grid scrolltop

【解决方案1】：

Kendo 在滚动包装器中包装网格。您可以使用此代码将其滚动到顶部：

grid.wrapper.find(".km-scroll-container").css("-webkit-transform", "");

UPD：

剑道支持的官方回答：

scrollTop 方法不起作用，因为在触摸屏设备上，Grid 使用移动滚动器。您可以使用重置方法重置它。例如：

var grid = $("#grid").data("kendoGrid");
grid.content.data("kendoMobileScroller").reset();

请注意，在桌面浏览器上执行此代码会产生错误。如果您想同时支持这两种情况，您可以使用 kendo.support.mobileOS - 如果未定义，则在应使用 scrollTop 的桌面浏览器上打开 Grid。

【讨论】：