🏷 S2 Version / S2 版本
| Package |
Version |
| @antv/s2 |
|
| @antv/s2-react |
|
| @antv/s2-react-components |
|
💻 Sheet Type / 表格类型
🖋 Describe the bug / 问题描述
表格在移动端数据量大，有滚动条的时候，此时进行缩放，缩放不了，当没有滚动条的时候可以，请问是框架不支持有滚动条进行缩放的功能么？
⌨️ Code Snapshots / 代码片段
<script setup>
import { TableSheet, S2Event } from '@antv/s2';
import { onMounted } from 'vue';
function generateRawData() {
const res = [];
for (let n = 0; n < 100; n++) {
res.push({
province: `p${n}`,
city: `c${n}`,
type: `type${n}`,
subType: `subType${n}`,
number: n,
});
}
return res;
}
const s2DataConfig = {
fields: {
rows: ['type', 'subType'],
columns: ['province', 'city'],
values: ['number'],
},
data: generateRawData(),
};
const s2Options = {
width: window.innerWidth,
height: 400,
};
let s2;
async function bootstrap() {
const container = document.getElementById('s2-container');
s2 = new TableSheet(container, s2DataConfig, s2Options);
s2.on(S2Event.GLOBAL_SCROLL, () => {
const { scrollTargetMaxOffset } = s2.facet.vScrollBar;
if (
s2.facet.isScrollToTop(0) ||
s2.facet.isScrollToBottom(scrollTargetMaxOffset)
) {
container.style['touch-action'] = 'auto';
} else {
container.style['touch-action'] = 'none';
}
});
await s2.render();
}
onMounted(() => {
bootstrap();
const container = document.getElementById('s2-container');
let startY;
container.addEventListener('touchstart', (e) => {
startY = e.touches[0].clientY;
const targetName = e.target.tagName;
if (targetName === 'CANVAS') {
container.style['touch-action'] = 'none';
}
});
container.addEventListener('touchmove', (e) => {
const moveY = e.touches[0].clientY;
const { scrollTargetMaxOffset } = s2.facet.vScrollBar;
if (moveY > startY) {
if (s2.facet.isScrollToTop(0)) {
container.style['touch-action'] = 'auto';
} else {
container.style['touch-action'] = 'none';
}
}
if (moveY < startY) {
if (s2.facet.isScrollToBottom(scrollTargetMaxOffset)) {
container.style['touch-action'] = 'auto';
} else {
container.style['touch-action'] = 'none';
}
}
});
container.addEventListener('touchend', () => {
startY = 0;
container.style['touch-action'] = 'auto';
});
});
</script>
<style>
* {
margin: 0;
padding: 0;
}
.container {
width: 100%;
height: 2000px;
background-color: skyblue;
}
#s2-container {
position: absolute;
width: 100%;
height: 400px;
top: 200px;
left: 0;
}
</style>
🔗 Reproduction link / 复现链接
No response
📋 Steps to Reproduce the Bug or Issue / 重现步骤
滚动表格后，进行缩放，缩放事件无法生效
😊 Expected Behavior / 期望行为
单指的时候滚动，缩放手势的时候正常缩放
😅 Current Behavior / 当前行为
No response
💻 OS / 操作系统
🌏 Browser / 浏览器
