大家在使用SpreadJS的时候往往会有自定义滚动条等需求,有时候根据不同的需求需要判断滚动是否已经滚到了顶,针对这样的需求在SpreadJS中应该如何实现呢?
在V16以前(含),LeftColumnChanged仅会在列发生变化的时候触发,在V17以后,我们对LeftColumnChanged事件做了优化,使其能够在像素滚动的时候也触发,也就是说每次滚动都会触发LeftColumnChanged事件,本需求将在LeftColumnChanged事件中实现。
示例代码如下:
- window.onload = function () {
- let designerConfig = JSON.parse(
- JSON.stringify(GC.Spread.Sheets.Designer.DefaultConfig)
- );
- let designer = new GC.Spread.Sheets.Designer.Designer(
- "gc-designer-container",
- designerConfig
- );
- let spread = designer.getWorkbook();
- let sheet = spread.getActiveSheet();
- spread.options.scrollbarMaxAlign = true;
- sheet.setColumnCount(100);
- let totalWidth = 0;
- for (let i = 0; i < sheet.getColumnCount(); i++) {
- totalWidth += sheet.getColumnWidth(i)
- }
- sheet.bind(GC.Spread.Sheets.Events.LeftColumnChanged, function (sender, args) {
- let leftColumn = args.newLeftCol;
- let width = 0;
- for (let i = 0; i < leftColumn; i++) {
- width += sheet.getColumnWidth(i);
- }
- console.log("左侧宽度:" + width);
- console.log("右侧宽度:" + (totalWidth - width));
- // 22为滚动条宽度
- if (spread.options.scrollByPixel) {
- let columnIndex = sheet.hitTest(sheet.getColumnWidth(0, GC.Spread.Sheets.SheetArea.rowHeader) + 1, sheet.getRowHeight(0, GC.Spread.Sheets.SheetArea.columnHeader) + 1).col;
- if ((totalWidth - width) - (spread.getHost().clientWidth - sheet.getColumnWidth(0, GC.Spread.Sheets.SheetArea.rowHeader) - 22 + sheet.getColumnWidth(columnIndex)) <= 0) {
- console.log("到顶啦!");
- }
- } else {
- if ((totalWidth - width) - (spread.getHost().clientWidth - sheet.getColumnWidth(0, GC.Spread.Sheets.SheetArea.rowHeader) - 22) <= 0) {
- console.log("到顶啦!");
- }
- }
- });
- };
复制代码
|
|