Calculate percentage height based on scroller and content height

This commit is contained in:
CloudHill 2020-10-20 23:40:12 +07:00
parent 1e4d0e077a
commit 0434cac271
2 changed files with 16 additions and 15 deletions

View File

@ -77,14 +77,15 @@ module.exports = {
childList: true, childList: true,
subtree: true, subtree: true,
}); });
function process(list) { function process(list) {
queue = []; queue = [];
let top = scroller.topDistance = store().top; let top = scroller.topDistance = store().top || 0;
if (top > 0 && store().percent) { if (top > 0 && store().percent) {
let pageContent = document.querySelector('.notion-page-content'); let contentHeight = Array.from(scroller.children)
if (pageContent) .reduce((h, c) => h + c.offsetHeight, 0);
scroller.topDistance *= pageContent.offsetHeight / 100; scroller.topDistance *= (contentHeight - scroller.offsetHeight) / 100;
} }
for (let { addedNodes } of list) { for (let { addedNodes } of list) {
@ -92,19 +93,18 @@ module.exports = {
addedNodes[0] && ( addedNodes[0] && (
addedNodes[0].className === 'notion-page-content' || addedNodes[0].className === 'notion-page-content' ||
addedNodes[0].className === 'notion-scroller' addedNodes[0].className === 'notion-scroller'
) ) && (top > 0)
) { ) {
if (top> 0) {
scroll.classList.add('hidden'); scroll.classList.add('hidden');
scroller = document.querySelector('.notion-frame > .notion-scroller'); scroller = document.querySelector('.notion-frame > .notion-scroller');
scroller.addEventListener('scroll', (event) => { scroller.addEventListener('scroll', (event) => {
if (event.target.scrollTop < scroller.topDistance) if (!scroller.topDistance || Math.ceil(event.target.scrollTop) < scroller.topDistance)
scroll.classList.add('hidden'); scroll.classList.add('hidden');
else else
scroll.classList.remove('hidden'); scroll.classList.remove('hidden');
}) });
}
} }
} }
} }

View File

@ -2,6 +2,7 @@
position: absolute; position: absolute;
bottom: 33px; bottom: 33px;
right: 33px; right: 33px;
z-index: 101;
cursor: default; cursor: default;
pointer-events: none; pointer-events: none;
} }