Derrick.Jiao 发表于 2021-1-6 10:26:22

滚动条同步滚动

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

实现效果如下图。


要实现两个Spread的同步滚动,第一步自然是创建两个Spread对象,相信大家都已经非常熟悉了。我们直接来到最关键的一步,利用事件和接口实现表单的同步。段代码在TopRowChanged事件的API中也有展示,只不过API的例子是作用在同一个Spread对象的两个sheet。这边只要稍加改写就能实现两个Spread的同步。
https://demo.grapecity.com.cn/spreadjs/help/api/GC.Spread.Sheets.Worksheet.html#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 发表于 2022-7-27 11:50:09

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

Derrick.Jiao 发表于 2022-7-27 12:15:30

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

目前只能通过showRow、showColumn实现,无法精细到像素级别。
页: [1]
查看完整版本: 滚动条同步滚动