diff --git a/app/scripts/renderers/webview.js b/app/scripts/renderers/webview.js index 9e53130229e01d111168ed40d80c1b87c183d40a..d3f999e93de6055908062a17304564c74ad8afb3 100644 --- a/app/scripts/renderers/webview.js +++ b/app/scripts/renderers/webview.js @@ -1,29 +1,55 @@ const {ipcRenderer} = require('electron'); function applySmoothScroll() { - let timeoutId = null; + let requestId = null; + let frame = 0; + const frameMax = 50; + let amount = 0; + const amountMax = 7; let deltaX = 0; let deltaY = 0; - const amount = 2; + let scrollLeft = 0; + let scrollTop = 0; - document.scrollingElement.addEventListener('wheel', (event) => { - event.preventDefault(); + const easeOut = (p) => { + return p * (2 - p); + }; - deltaX += event.deltaX * amount; - deltaY += event.deltaY * amount; + const scroll = () => { + frame++; + document.scrollingElement.scrollTo({ + left: scrollLeft + (deltaX * easeOut(frame / frameMax)), + top: scrollTop + (deltaY * easeOut(frame / frameMax)) + }); + if (frame === frameMax) { + frame = 0; + amount = 0; + cancelAnimationFrame(requestId); + } + else { + requestId = requestAnimationFrame(scroll); + } + }; - if (timeoutId === null) { - timeoutId = setTimeout(() => { - document.scrollingElement.scrollBy({ - left: deltaX, - top: deltaY, - behavior: 'smooth' - }); - timeoutId = null; - deltaX = 0; - deltaY = 0; - }, 150); + document.scrollingElement.addEventListener('wheel', (event) => { + event.preventDefault(); + if (Math.sign(deltaX) !== Math.sign(event.deltaX) + || Math.sign(deltaY) !== Math.sign(event.deltaY) + ) { + amount = 0; + } + if (amount < amountMax) { + amount++; + } + deltaX = event.deltaX * amount; + deltaY = event.deltaY * amount; + scrollLeft = document.scrollingElement.scrollLeft; + scrollTop = document.scrollingElement.scrollTop; + if (frame) { + frame = 0; + cancelAnimationFrame(requestId); } + scroll(); }); }