antvis/G6

@ant-design/charts 中使用关系图配置 scroll-canvas 后 鼠标滚轮不能滚动页面 #4749

lanxiaojia posted onGitHub

问题描述

import { DecompositionTreeGraph } from '@ant-design/charts';

// 配置 behaviors: [ 'drag-canvas', { type: 'scroll-canvas', scalableRange: -0.9, }, ],

开启 scroll-canvas 只能在画布上进行滚动,滚到顶部时不能自动切换成滚动页面

重现链接

https://codesandbox.io/s/mystifying-sunset-ncnwpv?file=/index.js

重现步骤

import { DecompositionTreeGraph } from '@ant-design/charts';

// 配置 behaviors: [ 'drag-canvas', { type: 'scroll-canvas', scalableRange: -0.9, }, ],

开启 scroll-canvas 只能在画布上进行滚动,滚到顶部时不能自动切换成滚动页面

预期行为

在画布滚动到顶部后 自动切换开始滚动页面

平台

  • 操作系统: [macOS, Windows, Linux, React Native ...]
  • 网页浏览器: [Google Chrome, Safari, Firefox]
  • G6 版本: [4.5.1 ... ]

操作系统: macOS

网页浏览器: Google Chrome,

"@ant-design/charts": "^1.4.2"

屏幕截图或视频(可选)

No response

补充说明(可选)

No response


因为画布上的滚轮事件禁止了默认事件 evt.preventDefault()

如果你需要到顶部或底部的时候,开始响应默认事件,可以自己给 canvas dom 绑定滚轮监听

posted by Yanyan-Wang almost 2 years ago

因为可用性上的滚轮事件禁止了违约事件 evt.preventDefault()

如果你需要到顶部或底部的时候,开始响应默认事件,可以自己给canvas dom绑定滚轮监听 好的 感谢 我先去试试

posted by lanxiaojia almost 2 years ago

@Yanyan-Wang 你好,我这边试了下,没太成功。 onReady={(graph) => { graph.on('wheel', (evt) => { console.log(evt, '==evt==='); }); }} 我这边就是不晓得怎么判断是否到顶部 或者到 底部了

posted by lanxiaojia almost 2 years ago

This issue has been closed because it has been outdate for a long time. Please open a new issue if you still need help.

这个 issue 已经被关闭,因为 它已经过期很久了。 如果你仍然需要帮助,请创建一个新的 issue。

posted by github-actions[bot] 11 months ago

Fund this Issue

$0.00
Funded

Pull requests