css 如何使用ant-design步骤滚动到特定的id组件

j8yoct9x 于 2023-01-03 发布在其他

关注(0)|答案(2)|浏览(240)

我正在使用Ant Design的步骤，使视频进度的步骤。我想滚动到特定的视频组件，匹配的步骤编号。就像如果我点击到第3步，然后元素与第三个id应该滚动，并在顶部。这是我的代码。
我希望它像这样工作How my scrolling should work

<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>

css

来源：https://stackoverflow.com/questions/65871411/how-to-scroll-to-particular-id-component-using-ant-design-steps

2条答案

按热度按时间

k7fdbhmy1#

使用<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属性将窗口滚动到所需位置
如果无法在<step>中添加a，则可以向活动跳转添加单击事件

<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
  }
}

赞(0）回复(0）举报 2023-01-03

vohkndzv2#

检查以下两个示例。
您可以使用<Anchor>Anchor组件获得类似的结果
App.jsx

import React from "react";
import "antd/dist/antd.css";
import "./index.css";
import { Anchor, Row, Col } from "antd";

const { Link } = Anchor;

const App = () => {
  return (
    <>
      <Row>
        <Col span={5}>
          <Anchor>
            <Link href="#1" title="Sans Tutorials 1" />
            <Link href="#2" title="Sans Tutorials 2" />
            <Link href="#3" title="Sans Tutorials 3" />
            <Link href="#4" title="Sans Tutorials 4" />
          </Anchor>
        </Col>
        <Col span={19}>
          <div id="1" className="tutorial">
            Sans Tutorials 1
          </div>
          <div id="2" className="tutorial">
            Sans Tutorials 2
          </div>
          <div id="3" className="tutorial">
            Sans Tutorials 3
          </div>
          <div id="4" className="tutorial">
            Sans Tutorials 4
          </div>
        </Col>
      </Row>
    </>
  );
};

export default App;

或
App.jsx

import React from "react";
import "./index.css";
import { Anchor, Row, Col } from "antd";
const App = () => (
  <Row>
    <Col span={5}>
      <Anchor
        items={[
          {
            key: "1",
            href: "#1",
            title: "Sans Tutorials 1"
          },
          {
            key: "2",
            href: "#2",
            title: "Sans Tutorials 2"
          },
          {
            key: "3",
            href: "#3",
            title: "Sans Tutorials 3"
          },
          {
            key: "4",
            href: "#4",
            title: "Sans Tutorials 4"
          }
        ]}
      />
    </Col>
    <Col span={19}>
      <div id="1" className="tutorial">
        Sans Tutorials 1
      </div>
      <div id="2" className="tutorial">
        Sans Tutorials 2
      </div>
      <div id="3" className="tutorial">
        Sans Tutorials 3
      </div>
      <div id="4" className="tutorial">
        Sans Tutorials 4
      </div>
    </Col>
  </Row>
);
export default App;

index.css

.code-box-demo .ant-affix {
  z-index: 11;
}

.tutorial {
  border: 1px solid black;
  padding: 20px;
  height: 300px;
  margin: 5px;
}

输出：
示例1

示例2

赞(0）回复(0）举报 2023-01-03

我来回答

css 如何使用ant-design步骤滚动到特定的id组件

2条答案

相关问题

热门标签

最新问答