0

我正在使用 ant 设计步骤来制作视频进度步骤。我想滚动到与步骤号匹配的特定视频组件。就像我点击到第 3 步一样，那么具有 3rd id 的元素应该滚动并出现在顶部。这是我的代码。

我希望它像这样工作我的滚动应该如何工作 Col左侧的台阶

 <Col xl={6} lg={6} md={4} sm={24} xs={24}>
        <Card
          className='fixedDivWrapper'
          style={{ width: "35vh", marginLeft: "5vw", marginBottom: "20vh" }}
        >
          <div
            style={{
              overflow: "auto",
              height: "80vh",
            }}
            id='style'
          >
            <Steps current={current} onChange={onChange} direction='vertical'>
              <Step title='Sans Tutorials 1' />
              <Step title='Sans Tutorials 2' />
              <Step title='Sans Tutorials 3' />
              <Step title='Sans Tutorials 4' />
              <Step title='Sans Tutorials 5' />
              <Step title='Sans Tutorials 6' />
              <Step title='Sans Tutorials 7' />
              <Step title='Sans Tutorials 8' />
              <Step title='Sans Tutorials 9' />
              <Step title='Sans Tutorials 10' />
              <Step title='Sans Tutorials 11' />
              <Step title='Sans Tutorials 12' />
              <Step title='Sans Tutorials 13' />
              <Step title='Sans Tutorials 14' />
            </Steps>
          </div>
        </Card>
      </Col>
      <Col
        style={{ textAlign: "left" }}
        xl={18}
        lg={18}
        md={20}
        sm={20}
        xs={20}
      >
        <Element id='1'>
          <HelpVideo />
        </Element>
        <Element>
          <HelpVideo id='2' />
        </Element>
        <Element>
          <HelpVideo id='3' />
        </Element>
        <Element>
          <HelpVideo id='4' />
        </Element>
        <Element>
          <HelpVideo id='5' />
        </Element>
        <Element>
          <HelpVideo id='6' />
        </Element>
        <Element>
          <HelpVideo id='7' />
        </Element>
        <Element>
          <HelpVideo id='8' />
        </Element>
      </Col>
    </Row>
4

1 回答 1

0

更简单的是使用<a>标签设置锚点

<Steps current={current} onChange={onChange} direction='vertical'>
       <Step title='Sans Tutorials 1'><a href="#1">go to id=1</a></Step>
</Steps>

<Element>
       <HelpVideo id='1' />
</Element>

或者您可以使用该scrollTop属性将窗口滚动到您想要的位置

如果你不能添加一个ain <step>，你可以添加一个点击事件来主动跳转

<Steps current={current} onChange={onChange} direction='vertical'>
       <Step title='Sans Tutorials 1' />
</Steps>

onChange = (e) => {
  if (e === 'some value') {
    window.location.href = '#1' // change there
  }
}
于 2021-01-24T14:19:28.220 回答