javascript - 水平滚动一个div到某个类名

Question

我的页面中有一个具有以下结构的导航栏。当我进入页面时，我已经编写了 jQuery 来为“已选择”选项卡添加一个类，并用一些 ID 标识它以指示我们在哪个页面上。这在桌面上看起来不错。

但是，当我使用移动设备查看时，例如当我在最后一个选项卡 (Tab E) 的页面上时，导航栏仍将位于栏的开头 (Tab A)。当我进入那些特定页面时，我想让它在移动设备上水平滚动。

谁能建议我如何使用 jQuery 来做到这一点？非常感谢。

if ($('#pageE').length) {
  $('.navBar .tab').removeClass('selected');
  $('.navBar .tabE').addClass('selected');
}

.navBar {
  width: 100%;
  color: #fff;
  background: #000;
  font-size: 0px;
  padding: 15px 0;
  text-align: center;
  text-transform: uppercase;
  overflow-x: scroll;
  overflow-y: hidden;
  white-space: nowrap;
}

.navBar .tab {
  letter-spacing: 2px;
  display: inline-block;
  font-size: 16px;
  padding: 0 20px;
  cursor: pointer;
  position: relative;
}

.navBar .tab a {
  color: #fff;
}

.navBar .tab.selected a:after {
  content: "";
  display: block;
  background: red;
  margin: 0 auto;
  height: 5px;
  width: 80px;
  position: absolute;
  bottom: -15px;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="navBar">
  <div class="tab tabA">
    <a href="pageA">Tab A</a>
  </div>
  <div class="tab tabB">
    <a href="pageB">Tab B</a>
  </div>
  <div class="tab tabC">
    <a href="pageC">Tab C</a>
  </div>
  <div class="tab tabD">
    <a href="pageD">Tab D</a>
  </div>
  <div class="tab tabE selected">
    <a href="pageE">Tab E</a>
  </div>
</div>

Answer 1

对于水平滚动，可以使用scrollIntoView()方法

jQuery

$("#elementID")[0].scrollIntoView({
    behavior: "smooth", // or "auto" or "instant"
});

JavaScript

var element = document.getElementById("elementID"); 
element.scrollIntoView({behavior: "smooth"});