仅横向滚动IntoView

Question

我需要在View中完成最后一步，但不会丢失标题，(cose scrollIntoView也垂直滚动(

如何实现它只水平滚动进入视图而不是垂直

const App = () => {
React.useEffect(() => {
const activeStep = document.querySelector(".ant-steps-item- 
current");
if (activeStep) {
activeStep.scrollIntoView({ behavior: "smooth", inline: 
"center" });
}
}, []);
return (
<div style={{ minHeight: "200vh" }}>
<div style={{ height: "150px", fontSize: 
"5rem"}}>Title</div>
<Steps>
{steps.map((s, step) => {
const status = s === "step9" ? "current" : "";
return (
<Steps.Step status={status} key={step} title={s} 
description={s} />
);
})}
</Steps>
</div>

)；}；

你可以看到一个代码沙盒

Answer 1

看起来您已经在代码沙盒中完成了这项工作，但在大多数情况下，添加block:'nears'属性应该可以解决此问题。scrollIntoView仍然会尝试将元素垂直放置在视图中，但不会尝试将其垂直居中。

activeStep.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'center' })

https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView