Kendo UI for jQuery数据管理使用教程：滚动概述
Kendo UI目前最新提供Kendo UI for jQuery、Kendo UI for Angular、Kendo UI Support for React和Kendo UI Support for Vue四个控件。Kendo UI for jQuery是创建现代Web应用程序的完整UI库。
默认情况下，将启用网格的滚动功能。根据启用的滚动模式、网格尺寸和布局的呈现方式会有所不同。
入门指南
启用滚动功能后，该窗口小部件默认情况下呈现两个表：一个用于标题区域、一个用于可滚动数据区域。当您需要手动对Grid表进行JavaScript或CSS更新时，这两个表很重要。
…
…
以下示例通过虚拟滚动展示Grid中的HTML输出。
…
…
但是，为了较大程度的可访问性，请禁用Grid的滚动功能。 要禁用滚动，请将scrollable选项设置为false。
$(“#grid”).kendoGrid({
scrollable: false,
// other configuration
});
设置滚动条
默认情况下，启用滚动时，网格不显示滚动条。 要渲染滚动条并实现垂直或水平滚动，请定义网格的以下尺寸，您可以独立控制垂直和水平滚动。
要实现垂直滚动，请设置网格的高度。 否则，它将垂直扩展来显示所有行。
要实现水平滚动，请以像素为单位明确定义所有列的宽度，并确保它们的总和超过Grid的宽度。
启用滚动后，即使不需要网格的垂直滚动条也始终可见，这简化了实现并提高了小部件的性能。要删除垂直滚动条，请使用CSS规则，并确保Grid及其数据区域均未应用固定的高度，以便它们能够根据表行数进行收缩和扩展。 在下面的示例中，＃GridID仅允许将样式应用到特定的Grid实例。 要在所有Grid实例中使用这些样式，请将ID替换为.k-grid CSS类。
#GridID .k-grid-header
{
padding: 0 !important;
}
#GridID .k-grid-content
{
overflow-y: visible;
}
恢复滚动位置
在某些情况下，小部件反弹时，可能会重置网格的滚动位置。 为防止滚动位置恢复：
将滚动位置保存在dataBinding事件中。
恢复databound事件中的滚动位置。
可滚动容器是div.k-grid-content，可以将其作为小部件包装的子元素来检索。 如果启用了虚拟滚动，则可滚动数据容器为div.k-virtual-scrollable-wrap，并且仅水平滚动。
$(function () {
// Initialize the variable which will hold the scroll positions.
var scrollOffset = {
left: 0,
top: 0
};
// Save the scroll position before the new data is rendered.
function onGridDataBinding (e) {
var container = e.sender.wrapper.children(“.k-grid-content”); // or “.k-virtual-scrollable-wrap”
scrollOffset.left = container.scrollLeft();
scrollOffset.top = container.scrollTop(); // use only if virtual scrolling is disabled
}
// Restore the scroll position after the new data is rendered.
function onGridDataBound (e) {
var container = e.sender.wrapper.children(“.k-grid-content”); // or “.k-virtual-scrollable-wrap”
container.scrollLeft(scrollOffset.left);
container.scrollTop(scrollOffset.top); // use only if virtual scrolling is disabled
}
// Attach the Grid event handlers.
$(“#grid”).kendoGrid({
dataBinding: onGridDataBinding,
dataBound: onGridDataBound
// …the rest of the code is omitted for brevity…
});
});
缩放时调整滚动条和页面布局
缩放网页时，浏览器会更改除滚动条以外的所有页面的内容大小，这会导致启用滚动功能的网格中的标题和数据区域之间未对齐。 要调整布局，请在window.resize上执行以下代码。
注意：如果网格处于从右到左（RTL）模式，请使用“ padding-left”而不是“ padding-right”配置。
var grid = $(‘#GridID’).data(‘kendoGrid’);
grid.thead.closest(“.k-grid-header”).css(“padding-right”, kendo.support.scrollbar(true));
公司名称：北京哲想软件有限公司
北京哲想软件官方网站：www.cogitosoft.com
北京哲想软件微信公众平台账号：cogitosoftware
北京哲想软件微博：哲想软件
北京哲想软件邮箱：[email protected]
销售（俞先生）联系方式：+86（010）68421378
微信：18610247936 QQ：368531638
