[英]How to scroll to particular id component using ant-design steps
I am using ant design steps to make the video progress steps.我正在使用 ant 设计步骤来制作视频进度步骤。 I want to scroll to the particular video component which matches the step number.
我想滚动到与步数匹配的特定视频组件。 Like if I clicked to step 3 then Element with 3rd id should sroll and come at top.
就像如果我点击第 3 步,那么具有 3rd id 的元素应该滚动并出现在顶部。 This is my code.
这是我的代码。
I want this to work like this 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>
Easier is to use the <a>
tag to set the anchor point更简单的是使用
<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>
or you can use the scrollTop
property to scroll the window to the position you want或者您可以使用
scrollTop
属性将 window 滚动到您想要的 position
if you cant add a a
in <step>
, you can add a click event to active jump如果你不能在
<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
}
}
Check the following two examples.检查以下两个示例。
You can get similar result using <Anchor>
Anchor component您可以使用
<Anchor>
锚组件获得类似的结果
App.jsx应用程序.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;
OR要么
App.jsx应用程序.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 index.css
.code-box-demo .ant-affix {
z-index: 11;
}
.tutorial {
border: 1px solid black;
padding: 20px;
height: 300px;
margin: 5px;
}
Output: Output:
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.