滚动条同步滚动

收藏

近期，有部分小伙伴想在咨询横纵滚动条的同步滚动如何实现。那么，今天他来了。本章教程教你利用两个事件，两个接口，实现横纵滚动条的同步滚动。
首先我们来公布这两个事件与接口，分别为TopRowChanged和LeftColumnChanged事件、showRow和showColumn接口。TopRowChanged事件监听的是表单顶行更改的事件，LeftColumnChanged事件监听的是表单左列改变的事件。showRow用于将指定的行显示在表单顶部，showColumn用于将指定的列展示在表单的最左侧。

实现效果如下图。
image.png567720946.png

要实现两个Spread的同步滚动，第一步自然是创建两个Spread对象，相信大家都已经非常熟悉了。我们直接来到最关键的一步，利用事件和接口实现表单的同步。段代码在TopRowChanged事件的API中也有展示，只不过API的例子是作用在同一个Spread对象的两个sheet。这边只要稍加改写就能实现两个Spread的同步。
https://demo.grapecity.com.cn/sp ... event:TopRowChanged

var sheet1 = spread.getSheet(0),
sheet2 = spread1.getSheet(0);
sheet1.bind(GC.Spread.Sheets.Events.TopRowChanged, function (sender, args) {
//将显示的sheet1的顶部行设置为sheet2(垂直滚动同步)。
sheet2.showRow(args.newTopRow, GC.Spread.Sheets.VerticalPosition.top);
});
sheet1.bind(GC.Spread.Sheets.Events.LeftColumnChanged, function (sender, args) {
//将sheet1显示的左列设置为sheet2(水平滚动同步)。
sheet2.showColumn(args.newLeftCol, GC.Spread.Sheets.HorizontalPosition.left);
});

复制代码

下载附件即可查看完整demo

sssssss · sssssss

像素级的滚动有办法同步吗？

Derrick.Jiao · Derrick.Jiao

sssssss 发表于 2022-7-27 11:50
像素级的滚动有办法同步吗？

目前只能通过showRow、showColumn实现，无法精细到像素级别。

		自动登录	找回密码
密码			立即注册

滚动条同步滚动

2 个回复

SpreadJS 高级认证

讲师达人

GrapeCity

悬赏达人

SpreadJS 认证