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

Question

我有一个容器，其中的标签水平排列。参见下面的示例。

该容器具有overflow:hidden和white-space:nowrap，因此标记可能会永远向右移。如果要在Javascript中使用HTML元素，我想以编程方式水平滚动到给定的标签。

在测试组件中，我一直在使用el.scrollIntoView()，它似乎运行得很好。但是后来我将组件集成到一个更大的HTML页面中，该页面可以垂直滚动，并且我注意到每次调用el.scrollIntoView时，它仍会在其容器内水平滚动到视图中，但是整个页面也会跳到该容器所在的位置恰好与浏览器窗口的顶部对齐。我显然不希望这是第二种行为。

是否有某种方法可以只滚动到容器内的视图，而浏览器窗口也不会跳转？如果可能的话，我想使用香草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>