I have a container with tags that line up horizontally. See example below.
The container has overflow:hidden
and white-space:nowrap
, so the tags can potentially go out to the right forever. I'd like to programatically horizontal scroll to a given tag, provided I have its HTML element in Javascript.
In my test component, I'd been using el.scrollIntoView()
, which seemed to be working perfectly. But then I integrated the component into a larger HTML page that scrolled vertically, and I noticed each time I called el.scrollIntoView
, it would still scroll into view horizontally within its container, but the whole page would also jump to where the container was right in line with the top of the browser window. It's this second behavior that I obviously don't want.
Is there some way to scroll into view only within a container, and not have the browser window also jump? I'd like to use vanilla JS, if possible.
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>
scrollIntoView() , which scrolls an element into view. Element. scrollIntoView() can take two types of elements: a boolean or an object. The object argument gives developers more control over how elements 'in view' are aligned, but has slightly less browser support.
A scroll container is created by applying overflow: scroll to a container, or overflow: auto when there is enough content to cause overflow.
The scrollIntoView method: The scrollIntoView() is used to scroll to the specified element in the browser. Example: Using scrollIntoView() to scroll to an element.
HTML | DOM scrollIntoView() Method The scrollIntoView() method scrolls the specified element into the visible area of the browser window. Syntax: document. getElementById("id").
Consider changing container.scrollLeft
value:
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With