github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2024-12-05 03:43:39 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

DEV: Cleanup body.scrollTop usage (#16445)

Browse Source 
All current browser treat the HTML document (not the body element) as
the scrollable document element. Hence in all current browsers,
`document.body.scrollTop` returns 0. This commit removes all usage of
this property, because it is effectively 0.

Co-authored-by: David Taylor <david@taylorhq.com>
This commit is contained in:
Penar Musaraj 2022-04-12 13:23:57 -04:00
parent 9a9a29b24b
commit bb57be95f0
2 changed files with 4 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
app/assets/javascripts/discourse/app/components/scrolling-post-stream.js
View File

@ -58,24 +58,6 @@ export default MountWidget.extend({
); );
}, },
beforePatch() {
this.prevHeight = document.body.clientHeight;
this.prevScrollTop = document.body.scrollTop;
},
afterPatch() {
const height = document.body.clientHeight;
// This hack is for when swapping out many cloaked views at once
// when using keyboard navigation. It could suddenly move the scroll
if (
this.prevHeight === height &&
document.body.scrollTop !== this.prevScrollTop
) {
document.body.scroll({ left: 0, top: this.prevScrollTop });
}
},
scrolled() { scrolled() {
if (this.isDestroyed || this.isDestroying) { if (this.isDestroyed || this.isDestroying) {
return; return;
@ -103,8 +85,7 @@ export default MountWidget.extend({
const slack = Math.round(windowHeight * 5); const slack = Math.round(windowHeight * 5);
const onscreen = []; const onscreen = [];
const nearby = []; const nearby = [];
const windowTop = const windowTop = document.scrollingElement.scrollTop;
document.documentElement.scrollTop || document.body.scrollTop;
const postsWrapperTop = domUtils.offset( const postsWrapperTop = domUtils.offset(
document.querySelector(".posts-wrapper") document.querySelector(".posts-wrapper")
).top; ).top;
@ -203,9 +184,7 @@ export default MountWidget.extend({
const elem = postsNodes.item(onscreen[0]); const elem = postsNodes.item(onscreen[0]);
const elemId = elem.id; const elemId = elem.id;
const elemPos = domUtils.position(elem); const elemPos = domUtils.position(elem);
const distToElement = elemPos const distToElement = elemPos?.top || 0;
? document.body.scrollTop - elemPos.top
: 0;
const topRefresh = () => { const topRefresh = () => {
refresh(() => { refresh(() => {
@ -214,7 +193,7 @@ export default MountWidget.extend({
// Quickly going back might mean the element is destroyed // Quickly going back might mean the element is destroyed
const position = domUtils.position(refreshedElem); const position = domUtils.position(refreshedElem);
if (position && position.top) { if (position && position.top) {
let whereY = position.top + distToElement; let whereY = position.top - distToElement;
document.documentElement.scroll({ top: whereY, left: 0 }); document.documentElement.scroll({ top: whereY, left: 0 });
// This seems weird, but somewhat infrequently a rerender // This seems weird, but somewhat infrequently a rerender

3
app/assets/javascripts/discourse/app/components/site-header.js
View File

@ -441,6 +441,5 @@ export default SiteHeaderComponent.extend({
export function headerTop() { export function headerTop() {
const header = document.querySelector("header.d-header"); const header = document.querySelector("header.d-header");
const headerOffsetTop = header.offsetTop ? header.offsetTop : 0; return header.offsetTop ? header.offsetTop : 0;
return headerOffsetTop - document.body.scrollTop;
} }