web/notify.moe
Code Issues Pull Requests Activity

Smooth scrolling

Browse Source
This commit is contained in:
Eduard Urbach 2017-07-05 21:12:33 +02:00
parent 4a76c12803
commit ca1c5838bf
1 changed files with 28 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
scripts/Actions.ts
View File

@ -83,38 +83,38 @@ export function diff(arn: AnimeNotifier, element: HTMLElement) {
let url = element.dataset.url || (element as HTMLAnchorElement).getAttribute("href") let url = element.dataset.url || (element as HTMLAnchorElement).getAttribute("href")
arn.diff(url).then(() => { arn.diff(url).then(() => {
arn.requestIdleCallback(() => { const duration = 300.0
const duration = 300.0 const steps = 60
const steps = 60 const interval = duration / steps
const interval = duration / steps const fullSin = Math.PI / 2
const fullSin = Math.PI / 2 const contentPadding = 24
const contentPadding = 24
let target = element
let target = element let scrollHandle: number
let scrollHandle: number let oldScroll = arn.app.content.parentElement.scrollTop
let oldScroll = arn.app.content.parentElement.scrollTop let newScroll = 0
let newScroll = Math.max(target.offsetTop - contentPadding, 0) let finalScroll = Math.max(target.offsetTop - contentPadding, 0)
let scrollDistance = newScroll - oldScroll let scrollDistance = finalScroll - oldScroll
let timeStart = Date.now() let timeStart = Date.now()
let timeEnd = timeStart + duration let timeEnd = timeStart + duration
let scroll = () => { let scroll = () => {
let time = Date.now() let time = Date.now()
let progress = (time - timeStart) / duration let progress = (time - timeStart) / duration
if(progress > 1.0) { if(progress > 1.0) {
progress = 1.0 progress = 1.0
}
arn.app.content.parentElement.scrollTop = oldScroll + scrollDistance * Math.sin(progress * fullSin)
if(time >= timeEnd || arn.app.content.parentElement.scrollTop == newScroll) {
clearInterval(scrollHandle)
}
} }
scrollHandle = setInterval(scroll, interval) newScroll = oldScroll + scrollDistance * Math.sin(progress * fullSin)
}) arn.app.content.parentElement.scrollTop = newScroll
if(time < timeEnd && newScroll != finalScroll) {
window.requestAnimationFrame(scroll)
}
}
window.requestAnimationFrame(scroll)
}) })
} }