仅水平 scrollIntoView答案

【问题标题】：Horizontal scrollIntoView only仅水平 scrollIntoView
【发布时间】：2022-07-07 00:06:54
【问题描述】：

我需要在这里进入View的最后一步，但不会丢失标题，（因为 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>

); };

你可以看到code sandbox

【问题讨论】：

欢迎来到 SO。请将您的代码发布到问题中，而不是外部链接。
我不确定你想说什么。据我了解，您希望避免使用垂直滚动条。在 index.css 文件中添加 body{ overflow-y: hidden}

标签： javascript reactjs

【解决方案1】：

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

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

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

【讨论】：