确定页面上Paper.js同步滚动视图的滚动距离答案

【问题标题】：Determine scrolled distance on the webpage for Paper.js synchronized scrolling of the view确定页面上Paper.js同步滚动视图的滚动距离
【发布时间】：2021-11-30 04:33:14
【问题描述】：

我在网页上放置了一个绝对定位的画布。画布上有一些使用 Paper.js 创建的项目。我希望画布（或视图）与网页的滚动同步移动。

画布覆盖整个屏幕（1920 x 1080）而不是网页（1920 x 可变长度）。所以，仅仅移动画布的固定位置是行不通的。它不再覆盖在整个屏幕上。

后来，我在 Paper.js 中发现了关于视图的信息，我可以使用以下行来滚动视图：

project.view.scrollBy(new Point(0, 450));

问题是我无法确定需要为 450 设置的值，以便滚动始终同步。

当按下向上和向下键时，我确实使用以下 JavaScript 来为网页上的滚动动作设置动画：

$("section.scrollable").animate({scrollTop : $("section.scrollable").scrollTop() + 300 })

但是，将 300 放入 scrollBy 值中也不会正确同步地移动画布和网页。

This pen 是一个非常简单的例子来展示我的问题。您可能更喜欢在debug mode 中看到它。

您可以在画布上拖动以创建橙色线条。

在覆盖的画布上绘制了三个标题和三个对应的线。画布宽 1920 像素，高 1080 像素。

第三个标题低于 1080 像素，因此它的线条在画布上不可见。但是，当我使用以下行在 Paper 视图中滚动时，它变得可见：

project.view.scrollBy(new Point(0, 600));

以下是我的问题：

画布位置必须保持固定。因此，它不会随文档的其余部分一起滚动。
但是，Paper.js 的视图必须与文档同步移动，这样行、路径和其他项目就不会改变它们相对于网页的相对位置。例如，这些行仍然保留在相同的标题下。

【问题讨论】：

您能否尝试为您的问题创建一个可重现的最小版本（在存储库或一些代码游乐场中），以便我们向您提出解决方案？
嗨@sasensi。我已经用一个例子更新了这个问题。 :)

标签： javascript html css paperjs

【解决方案1】：

您需要监听滚动事件，并且每次发生时，更新您的 paper.js 场景 y 位置。
与使用视图相比，我发现使用活动层更方便，但理论上您可以对视图执行相同操作。
这是一个简单的fiddle，应该能让你走上正轨。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Debug Paper.js</title>
    <script src="https://unpkg.com/acorn"></script>
    <script src="https://unpkg.com/paper"></script>
    <style>
        html,
        body {
            margin : 0;
            height : 100%;
        }

        canvas {
            position : fixed;
            top      : 0;
            left     : 0;
            width    : 100vw;
            height   : 100vh;
        }

        section {
            max-width : 500px;
            margin    : auto;
        }
    </style>
</head>
<body>

<section>
    <div>
        <h1>title 1</h1>
        <p>...</p>
    </div>
    <div>
        <h1>title 2</h1>
        <p>...</p>
    </div>
</section>

<canvas id="canvas" resize></canvas>

<script>
    paper.setup('canvas');

    new paper.Path.Circle({
        center: paper.view.center,
        radius: 50,
        fillColor: 'orange'
    });

    const originalY = paper.view.center.y;

    const update = () => {
        const yOffset = document.scrollingElement.scrollTop;
        paper.view.center.y = originalY - yOffset;
    };

    window.addEventListener('scroll', update);
</script>
</body>
</html>

【讨论】：

谢谢萨森西。 :) 可以使用 CSS 转换来缩放可滚动元素的同步吗？
不客气。是的，当然，在实际用例中，您将不可避免地不得不处理这类棘手的问题。