admin管理员组文章数量:1401783
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>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>- If you want it to always show the element scrolled to the very bottom after you inserted new elements, then just force that via script as well. – C3roe Commented Sep 10, 2020 at 8:56
- Does this answer your question? Scroll to bottom of div? – C3roe Commented Sep 10, 2020 at 8:57
- As usual reality is much more plex than the code snippet. The reality being a modular React app where the scroller is nowhere near the content being dynamically loaded. But if the only way is keeping a reference to the scroll position before and after content has been added and restore the previous value. I guess I'll go down that rabbit hole. I was only hoping for something more elegant to counter, in my opinion, the weird behavior of Chrome. – opex Commented Sep 10, 2020 at 9:09
2 Answers
Reset to default 8I had a similar issue, and found this (https://github./angular-ui/ui-scroll/issues/138). I had to put overflow-anchor:none; on a parent element to stop Chrome's behaviour. In your case, I got it to work by adding this style to .scrollbar
Note: this css is not patible with IE or Safari, but this issue doesn't happen on Safari, and no one cares about IE anymore.. :)
My current solution is to save the scrollTop of the scrollable div before more content is added and restore that value if it changed after content was added. This will make Chrome behave more or less like Firefox.
Unfortunately it's not a perfect solution since there is a quick flicker to the content in Chrome since it scrolls to the bottom and than back.
本文标签： javascriptPrevent Chrome from keeping scroll position relative to bottomStack Overflow
版权声明：本文标题：javascript - Prevent Chrome from keeping scroll position relative to bottom - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744317340a2600327.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论