virtual scroll

S2 is based on Canvas rendering, and also realizes virtual scrolling, that is, only cells in the visible area are rendered, which is enabled by default. see more

200 ms delay effect

custom scroll speed

The scrollSpeedRatio can be configured to control the scroll rate, which is divided into two directions:水平and垂直. The range is 0-1 , and the default is 1 . View specific examples

const s2Options = {
  interaction: {
    scrollSpeedRatio: {
      vertical: 0.3, // 垂直
      horizontal: 1, // 水平
    },
  },
};

mouse wheel scrolling horizontally

Swipe the scroll wheel to scroll vertically, if you hold Shift at the same time, you can scroll horizontally

Modify scroll to bounds behavior

When there are scroll bars in both itself and the parent container, the browser's default scrolling behavior is: non-border does not trigger the parent container to scroll, and when the border is reached, the parent container is triggered to scroll, and you can also configure overscroll-behavior to change the default behavior.

S2 is a virtual scroll, but it also simulates the scrolling behavior of the browser, and the overscrollBehavior can be configured to control the non-boundary scrolling behavior. view example

const s2Options = {
  interaction: {
    overscrollBehavior: 'auto' // 'auto' | 'none' | 'contain';
    overscrollBehavior: null  // 设为 null 则不做任何处理
  },
};

• auto : Same as browser scrolling behavior

• contain : After scrolling to the border, the parent container will not be triggered to scroll

• none : After scrolling to the boundary, the parent container will not be triggered to scroll, and the default scrolling behavior of the browser will be disabled, such as triggering page pull-down to refresh , and triggering return when the Mac touchpad scrolls horizontally . See more

Note : When overscrollBehavior is configured, the corresponding overscroll-behavior attribute will be additionally added to the body to achieve the purpose of disabling the browser's default scrolling behavior

Listen for scrolling events

For the透视表, the scrollable area is行头单元格and the数值单元格respectively; for the明细表, the scrollable area is only the数值单元格, which can be monitored separately or collectively

S2 provides two kinds of scrolling events:

• S2Event.GLOBAL_SCROLL : Cell scrolling, triggers when the value/row header cell scrolls
• S2Event.ROW_CELL_SCROLL : row header cell scrolling

At the same time: For the s2-react and s2-vue versions, event mapping is also provided, please refer to the API documentation for details

It should be noted that the row header cell will only display the scroll bar when the row header is fixed , and there will only be a horizontal scroll bar , so the scrollY will always be 0

import { S2Event } from '@antv/s2';

s2.on(S2Event.GLOBAL_SCROLL, (position) => {
  console.log('表格滚动', position) // { scrollX: 0, scrollY: 100 }
})

s2.on(S2Event.ROW_CELL_SCROLL, (position) => {
  console.log('行头单元格滚动', position) // { scrollX: 0, scrollY: 100 }
})

Manually trigger table scrolling

Consider the following examples:

• Scroll to the specified cell
• cycle scrolling