滚动条同步滚动

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

实现效果如下图。


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

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

复制代码

下载附件即可查看完整demo

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

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

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