Mastodon/Pinafore-Web-Client-Frontend
1
0
Fork 0
mirror of https://github.com/nolanlawson/pinafore synced 2024-12-12 18:28:03 +01:00
Code Issues Releases Wiki Activity

fix: use native smooth scroll when possible (#751)

Browse Source
This commit is contained in:
Nolan Lawson 2018-12-07 08:20:16 -08:00 committed by GitHub
parent 2280ff2832
commit 4b028b1a62
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 31 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
routes/_components/NavItem.html
View File

@ -224,4 +224,4 @@
}
}
}
</script>
</script>

32
routes/_utils/smoothScrollToTop.js
View File

@ -2,7 +2,7 @@
const easingOutQuint = (x, t, b, c, d) =>
c * ((t = t / d - 1) * t * t * t * t + 1) + b
const scroll = (node, key, target) => {
function smoothScrollPolyfill (node, key, target) {
const startTime = Date.now()
const offset = node[key]
const gap = target - offset
@ -44,4 +44,32 @@ const scroll = (node, key, target) => {
return cancel
}
export const smoothScrollToTop = node => scroll(node, 'scrollTop', 0)
function testSupportsSmoothScroll () {
let supports = false
try {
let div = document.createElement('div')
div.scrollTo({
top: 0,
get behavior () {
supports = true
return 'smooth'
}
})
} catch (err) {} // Edge throws an error
return supports
}
const smoothScrollSupported = process.browser && testSupportsSmoothScroll()
export function smoothScrollToTop (node) {
if (smoothScrollSupported) {
console.log('using native smooth scroll')
return node.scrollTo({
top: 0,
behavior: 'smooth'
})
} else {
console.log('using polyfilled smooth scroll')
return smoothScrollPolyfill(node, 'scrollTop', 0)
}
}