代码之家 › 专栏 › 技术社区 › Matt Anxo P

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

js-scrollintoview scroll css html javascript

Matt Anxo P · 技术社区 · 5 年前

我有一个标签水平排列的容器。见下面的例子。

overflow:hidden white-space:nowrap ,因此标签可能永远向右。我希望通过编程水平滚动到给定的标记,前提是我有Javascript中的HTML元素。

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

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>

1 回复 | 直到 5 年前

Kosh 5 年前

考虑改变 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>