将元素滚动到容器内的视图中，但不在浏览器窗口中

Question

我有一个带有水平排列标签的容器。请参阅下面的示例。

容器有overflow:hidden 和white-space:nowrap，因此标签可能永远向右移动。我想以编程方式水平滚动到给定的标签，前提是我在 Javascript 中有它的 HTML 元素。

在我的测试组件中，我一直在使用el.scrollIntoView()，它似乎运行良好。但是后来我将组件集成到一个更大的垂直滚动的 HTML 页面中，我注意到每次调用 el.scrollIntoView 时，它仍然会在其容器内水平滚动到视图中，但整个页面也会跳转到容器正确的位置与浏览器窗口的顶部一致。这是我显然不想要的第二种行为。

有没有办法只在容器内滚动到视图中，而不让浏览器窗口也跳转？如果可能的话，我想使用 vanilla JS。

function scrollToLast() {
  var container = document.getElementById('container');
  var tags = container.getElementsByTagName('span');
  tags[tags.length-1].scrollIntoView()
}

body {
  text-align: center;
}

#container {
  border: 1px solid;
  margin: 100px auto 20px;
  overflow: hidden;
  padding: 10px;
  text-align: left;
  white-space: nowrap;
  width: 75%
}

#container > span {
  border: 1px solid grey;
  display: inline-block;
  margin-right: 5px;
  padding: 3px;
}

button {
  margin-bottom: 100px;
}

.extra-content-on-page:before {
  content: 'Simulates more content';
}

.extra-content-on-page {
  background: #f2f2f2;
  height: 100px;
}

<div class="extra-content-on-page"></div>

<div id="container">
  <span>Tag 1</span>
  <span>Tag 2</span>
  <span>Tag 3</span>
  <span>Tag 4</span>
  <span>Tag 5</span>
  <span>Tag 6</span>
  <span>Tag 7</span>
  <span>Tag 8</span>
  <span>Tag 9</span>
  <span>Tag 10</span>
  <span>Tag 11</span>
  <span>Tag 12</span>
  <span>Tag 13</span>
  <span>Tag 14</span>
  <span>Tag 15</span>
  <span>Tag 16</span>
  <span>Tag 17</span>
  <span>Tag 18</span>
  <span>Tag 19</span>
  <span>Tag 20</span>
  <span>Tag 21</span>
  <span>Tag 22</span>
  <span>Tag 23</span>
  <span>Tag 24</span>
  <span>Tag 25</span>
  <span>Tag 26</span>
  <span>Tag 27</span>
  <span>Tag 28</span>
  <span>Tag 29</span>
  <span>Tag 30</span>
  <span>Tag 31</span>
</div>

<button onClick="scrollToLast()">Scroll to Tag 31</button>

<div class="extra-content-on-page"></div>
<div class="extra-content-on-page"></div>
<div class="extra-content-on-page"></div>
<div class="extra-content-on-page"></div>
<div class="extra-content-on-page"></div>
<div class="extra-content-on-page"></div>
<div class="extra-content-on-page"></div>
<div class="extra-content-on-page"></div>

Answer 1

考虑更改container.scrollLeft 值：

function scrollToLast() {
  var container = document.getElementById('container');
  var tags = container.getElementsByTagName('span');
  container.scrollLeft = tags[tags.length-1].offsetLeft;
}

body {
  text-align: center;
}

#container {
  border: 1px solid;
  margin: 100px auto 20px;
  overflow: hidden;
  padding: 10px;
  text-align: left;
  white-space: nowrap;
  width: 75%;
  scroll-behavior: smooth;
}

#container > span {
  border: 1px solid grey;
  display: inline-block;
  margin-right: 5px;
  padding: 3px;
}

button {
  margin-bottom: 100px;
}

.extra-content-on-page:before {
  content: 'Simulates more content';
}

.extra-content-on-page {
  background: #f2f2f2;
  height: 100px;
}

<div class="extra-content-on-page"></div>

<div id="container">
  <span>Tag 1</span>
  <span>Tag 2</span>
  <span>Tag 3</span>
  <span>Tag 4</span>
  <span>Tag 5</span>
  <span>Tag 6</span>
  <span>Tag 7</span>
  <span>Tag 8</span>
  <span>Tag 9</span>
  <span>Tag 10</span>
  <span>Tag 11</span>
  <span>Tag 12</span>
  <span>Tag 13</span>
  <span>Tag 14</span>
  <span>Tag 15</span>
  <span>Tag 16</span>
  <span>Tag 17</span>
  <span>Tag 18</span>
  <span>Tag 19</span>
  <span>Tag 20</span>
  <span>Tag 21</span>
  <span>Tag 22</span>
  <span>Tag 23</span>
  <span>Tag 24</span>
  <span>Tag 25</span>
  <span>Tag 26</span>
  <span>Tag 27</span>
  <span>Tag 28</span>
  <span>Tag 29</span>
  <span>Tag 30</span>
  <span>Tag 31</span>
</div>

<button onClick="scrollToLast()">Scroll to Tag 31</button>

<div class="extra-content-on-page"></div>
<div class="extra-content-on-page"></div>
<div class="extra-content-on-page"></div>
<div class="extra-content-on-page"></div>
<div class="extra-content-on-page"></div>
<div class="extra-content-on-page"></div>
<div class="extra-content-on-page"></div>
<div class="extra-content-on-page"></div>