The issue has been closed

滚动条监听滚动变化事件报错 #5656

KuduroJS posted onGitHub

文档中的DEMO: https://g2.antv.antgroup.com/spec/component/scrollbar

代码如下:

import { Chart } from '@antv/g2';

const chart = new Chart({
  container: 'container',
});

chart
  .line()
  .data({
    type: 'fetch',
    value:
      'https://gw.alipayobjects.com/os/bmw-prod/551d80c6-a6be-4f3c-a82a-abd739e12977.csv',
  })
  .encode('x', 'date')
  .encode('y', 'close')
  // 开启 X 轴缩略轴
  .scrollbar('x', {});

chart.on('afterrender', () => {
  const { canvas } = chart.getContext();
  const { document } = canvas;
  document.querySelector('.slider').addEventListener('valuechange', (evt) => {
    console.info(evt.detail);
  });
});

chart.render();

具体报错内容是？

posted by pearmini over 1 year ago

具体报错内容是？

VM59:38 Uncaught TypeError: Cannot read properties of null (reading 'addEventListener') at e.<anonymous> (<anonymous>:38:38) at i (umi.d4710503.js:1:34429) at e.emit (umi.d4710503.js:1:34442) at umi.d4710503.js:1:5405631

 document.querySelector('.slider').addEventListener('valuechange', (evt) => {
    console.info(evt.detail);
  });

//  document.querySelector('.slider') 是null吧

@pearmini

posted by KuduroJS over 1 year ago

应该是没有找到 slider，你 console.log(document) 一下，在控制台找一下这个组件

posted by pearmini over 1 year ago

我这边用的是scrollbar不是slider，可能scrollbar的文档有点问题。从dom看，scrollbar好像是canvas画的，不是dom元素。这个要怎么拿到滚动值呢。

posted by KuduroJS over 1 year ago

这个要怎么拿到滚动值呢。

通过监听事件的方式拿到：

slider.addEventListener('valuechange', onValueChange);

posted by pearmini over 1 year ago

Fund this Issue

$0.00

Funded

Pull requests

滚动条监听滚动变化事件报错 #5656

Company

Community

Support

Connect