如何实现动量缩放

Question

我想像this site（点击菜单 - ＆gt;演示）或this site一样实施缩放。如你所见，你可以放大和缩小动力。

所以，我的问题是，这怎么可能。我的初期虽然是这样的

<main>
    <section class="scrolling"></section>

   <section class="overlay">
       <button class="demo">Hello</button>
   </section>

带有隐形滚动条的.scrolling图层。叠加层fixed位于.scolling图层顶部pointer-events: none

.scrolling {
    height: 1000vh;
    position: relative;
}

.overlay {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    pointer-events: none;
 }

和一些js

main.addEventListener('scroll', (e) => {
    const scale = .... magic magic ....
    overlay.style.transform = 'scale(...)';
});

DEMO

正如您在演示中所看到的，如果您滚动叠加层有动量缩放。 但是我的演示有一个很大的问题

• 按钮不是clickabe
• 按钮在移动时不显示鼠标指针

我可以采取哪些建议来解决上述问题？ 是否有支持此功能的库？例如，我找到了Impetus.js，但它似乎没有根据滚动手势做动量。