fix: use native smooth scroll when possible (#751)
This commit is contained in:
parent
2280ff2832
commit
4b028b1a62
|
@ -224,4 +224,4 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -2,7 +2,7 @@
|
||||||
const easingOutQuint = (x, t, b, c, d) =>
|
const easingOutQuint = (x, t, b, c, d) =>
|
||||||
c * ((t = t / d - 1) * t * t * t * t + 1) + b
|
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 startTime = Date.now()
|
||||||
const offset = node[key]
|
const offset = node[key]
|
||||||
const gap = target - offset
|
const gap = target - offset
|
||||||
|
@ -44,4 +44,32 @@ const scroll = (node, key, target) => {
|
||||||
return cancel
|
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)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
Loading…
Reference in a new issue