javascript - 如何以编程方式滚动滚动？(javascript)

Question

如何以编程方式滚动到特定选项卡？我在这里有在codepen创建的示例选项卡。

我已经访问过此链接，但在我的情况下似乎有所不同。如何连续垂直自动滚动div内容

是否有 javascript、reactjs 或任何可以帮助实现这一目标的包？谢谢

---

预期：以编程方式滚动到“天气”选项卡，而无需使用idor滚动class？

body,
html {
  height: 100%;
}

.root {
  background: black;
  height: 100%;
}

.navbar {
  background-color: lightblue;
  width: 375px;
  height: 50px;
  overflow-y: auto;
}

.tab {
  padding: 2px;
  border: 1px solid gray;
  min-width: 100px;
}

.flex {
  display: flex;
}

.items-center {
  align-items: center;
}

.justify-center {
  justify-content: center;
}

<div class="root" align="center">
  <div class="navbar flex">
    <div class="tab flex items-center justify-center" id="trending">Trending</div>
    <div class="tab flex items-center justify-center" id="health">Health</div>
    <div class="tab flex items-center justify-center" id="technology">Technology</div>
    <div class="tab flex items-center justify-center" id="business">Business</div>
    <div class="tab flex items-center justify-center" id="sport">Sports</div>
    <div class="tab flex items-center justify-center" id="weather">Weather</div>
    <div class="tab flex items-center justify-center" id="entertainment">Entertainment</div>
    <div class="tab flex items-center justify-center" id="world">World</div>
    <div class="tab flex items-center justify-center" id="local">Local</div>
    <div class="tab flex items-center justify-center" id="covid">Covid-19</div>
  </div>
</div>

标签： javascriptreactjs

Answer 1

您提供的链接为您提供了有关操作的提示。在该示例中，div 使用该scrollTop属性以编程方式滚动。在您的情况下，您希望使用它的兄弟属性，即scrollLeft属性。此属性将以编程方式将溢出的元素向左滚动指定量。

scrollLeft 属性的 Mozilla 文档

我已经更新了您的代码以包含一个示例：

let el = document.getElementById("navbar");
el.scrollLeft = 350;

body, html {
  height: 100%;
}

.root {
  background: black;
  height: 100%;
}

.navbar {
  background-color: lightblue;
  width: 375px;
  height: 50px;
  overflow-y: auto;
}

.tab {
  padding: 2px;
  border: 1px solid gray;
  min-width: 100px;
}

.flex {
  display: flex;
}

.justify-center {
  justify-content: center;
}

<div class="root" align="center">
  <div class="navbar flex" id="navbar">
    <div class="tab flex items-center justify-center" id="trending">Trending</div>
    <div class="tab flex items-center justify-center" id="health">Health</div>
    <div class="tab flex items-center justify-center" id="technology">Technology</div>
    <div class="tab flex items-center justify-center" id="business">Business</div>
    <div class="tab flex items-center justify-center" id="sport">Sports</div>
    <div class="tab flex items-center justify-center" id="weather">Weather</div>
    <div class="tab flex items-center justify-center" id="entertainment">Entertainment</div>
    <div class="tab flex items-center justify-center" id="world">World</div>
    <div class="tab flex items-center justify-center" id="local">Local</div>
    <div class="tab flex items-center justify-center" id="covid">Covid-19</div>
  </div>
</div>