Skip to content
Permalink
Browse files
fix(highlight-and-scroll): scroll position calc
  • Loading branch information
h13i32maru committed Jul 11, 2020
1 parent 3e65644 commit 7ef530a520ef0d2e5488b067cc999707893998cd
Showing 1 changed file with 17 additions and 9 deletions.
@@ -17,11 +17,11 @@
// close prepare
closeNoHighlightResolvedThread();

// scroll to latest
await scrollToHighlight();

// add highlight indicator
addHighlightIndicator();

// scroll to latest
await scrollToHighlight();
}

function getComments() {
@@ -160,9 +160,14 @@
indicatorEl.appendChild(currentPosEl);

// calc timeline height
const lastCommentBottom = getComments().pop().getBoundingClientRect().bottom;
const timelineRect = document.querySelector('.js-discussion').getBoundingClientRect();
const timelineHeight = timelineRect.height - (timelineRect.bottom - lastCommentBottom);
function getTimelineHeight() {
const lastCommentBottom = getComments().pop().getBoundingClientRect().bottom + window.scrollY;
const timelineRect = document.querySelector('.js-discussion').getBoundingClientRect();
const timelineBottom = timelineRect.bottom + window.scrollY;
const timelineHeight = timelineRect.height - (timelineBottom - lastCommentBottom);
return {timelineHeight, timelineRect};
}
const {timelineHeight, timelineRect} = getTimelineHeight();
const timelineOffset = timelineRect.top + window.pageYOffset; //.js-discussionのheightを使うために、commentの絶対位置をオフセットする必要がある

// タイムラインの高さが小さいときは、インジケータも小さくする
@@ -218,10 +223,13 @@
// scroll position
if (timelineRect.bottom > window.innerHeight) {
window.addEventListener('wheel', async () => {
const top = Math.max(0, window.scrollY - timelineRect.top);
const bottom = Math.min(timelineHeight, (window.scrollY + window.innerHeight) - timelineRect.top);
const windowTop = window.scrollY;
const windowBottom = window.scrollY + window.innerHeight;
const {timelineHeight, timelineRect} = getTimelineHeight();
const timelineTop = timelineRect.top + window.scrollY;
const top = Math.min(timelineHeight, Math.max(0, windowTop - timelineTop));
const bottom = Math.max(0, Math.min(timelineHeight, windowBottom - timelineTop));
const height = (bottom - top) / timelineHeight;
// if (Math.ceil(100 * height) >= 100) return;

currentPosEl.style.top = `${top/timelineHeight * 100}%`;
currentPosEl.style.height = `${height * 100}%`;

0 comments on commit 7ef530a

Please sign in to comment.