I have a layout with a content area which have it's own scrollbar since I want the sidebar to scroll independently.
The content of the content area is dynamically appended using a button at the bottom.
When the content area's scroll position is at the very top (scrollTop === 0) and I append more content the scroll position stays at the top. If however the scroll position is not at the top Firefox and Chrome behave differently. In Firefox the scroll position stays relative to the top and content is appended below, off screen if necessary. In Chrome however the scroll position stays relative to the bottom keeping the button in the same position resulting in the user having to scroll up to see the new content.
Is there a way to get Chrome to behave like Firefox do?
To clarify. I do not want the content area to scroll to the bottom after new content has been added. I want it to stay where it is so that users don't have to scroll up to see the new content.
var count = 1;
window.addEventListener('load', function() {
var container = document.querySelector('[data-result]');
var button = document.querySelector('button');
button.addEventListener('click', function() {
for (var i = 0; i < 10; i++) {
var element = document.createElement('div');
element.innerHTML = 'Content row ' + count++;
container.appendChild(element);
}
});
});html,
body,
.page {
height: 100vh;
margin: 0;
}
body {
background-color: #eceff1;
}
.page {
display: flex;
flex-direction: column;
}
.header {
padding: .5rem;
}
.view {
display: flex;
flex-direction: row;
overflow-y: hidden;
}
.sidebar {
display: inline-flex;
flex-shrink: 0;
}
.content {
margin-left: .5rem;
display: flex;
flex-grow: 1;
margin-bottom: 2rem;
}
.scrollbar {
overflow: auto;
width: 100%;
height: 100%;
}
.card {
background-color: #fff;
}
.menu {
white-space: nowrap;
padding: .3rem .5rem;
}<!doctype html>
<html lang="en">
<head>
<title></title>
</head>
<body>
<div class="page">
<div class="header">Header</div>
<div class="view">
<div class="sidebar">
<div class="scrollbar">
<div class="card">
<div class="menu">Sidebar row 1</div>
<div class="menu">Sidebar row 2</div>
<div class="menu">Sidebar row 3</div>
<div class="menu">Sidebar row 4</div>
<div class="menu">Sidebar row 5</div>
<div class="menu">Sidebar row 6</div>
<div class="menu">Sidebar row 7</div>
</div>
</div>
</div>
<div class="content">
<div class="scrollbar">
<div data-result></div>
<div>
<button>
Show more
</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>