I'm experiencing an issue where I have a vertical scrollbar for the entire page, and within that, there's an element (let's call it 'content') with a max-height and overflow-y scroll.
The 'content' element contains child elements without specific HTML IDs (due to using an external library). I've obtained the offsetTop of the child element I want to scroll to, but instead of the element scrolling, the window itself scrolls to that offset top.
A demonstration of the issue can be found here: JSFiddle
var selector = document.getElementsByClassName("inner")
var offset = selector[0].childNodes[3]['offsetTop'];
window.scrollTo(0, offset);body {
background: #20262E;
padding: 20px;
font-family: Helvetica;
max-height:500px;
overflow-y: auto;
}
#app {
background: #fff;
border-radius: 4px;
padding: 20px;
transition: all 0.2s;
text-align: center;
}
.inner {
max-height: 700px;
overflow-y: scroll
}<div id="app">
<div class='inner'>
<p>
// Lorem Ipsum placeholder text
</p>
... (repeated Lorem Ipsum paragraphs)
<p>
harsimer kaur (repeated many times)
</p>
<p>
// Lorem Ipsum placeholder text
</p>
</div>
</div>