使用拉斐尔用滚动条绘制不移动的东西

draw something that doesn't move with scroll bar using Raphael

本文关键字：移动 滚动条 绘制      更新时间：2023-09-26

我用拉斐尔画了一个人物。该数字非常大，因此浏览器窗口显示滚动条。现在，我希望即使用户移动滚动条，图形的一部分也能保持静止。怎么能做到这一点呢？此外，我想根据滚动条的位置更改图形（例如，显示滚动条的 x 坐标）。这可能吗？谢谢。

这是我问题的解决方案。要使图形的一部分保持静止而不考虑滚动，请创建两个画布，一个用于应随滚动移动的部分，另一个用于静止部分。然后将第二块画布放入<div style="position:fixed">.这是代码：

<div id="part1">
    <script type="text/javascript">
        var paper1 = Raphael("part1", 1000, 200);
        // draw the figure
    </script>
</div>
<div id="part2" style="position: fixed">
    <script type="text/javascript">
        var paper2 = Raphael("part2", 1000, 200);
        // draw the figure
    </script>
</div>

请注意，仅当图的两个部分分开时，此代码才有效。我不知道如果它们重叠，它们是否仍然可以在两个画布中绘制。

若要根据滚动条的位置更改图形，请使用以下代码。getScrollX（） 函数改编自 http://www.howtocreate.co.uk/tutorials/javascript/browserwindow 处的代码。

<script type="text/javascript">
    function getScrollX() {
        var scrOfX = 0;
        if (typeof (window.pageYOffset) == 'number') {
            //Netscape compliant
            scrOfX = window.pageXOffset;
        } else if (document.body
                && (document.body.scrollLeft || document.body.scrollTop)) {
            //DOM compliant
            scrOfX = document.body.scrollLeft;
        } else if (document.documentElement
                && (document.documentElement.scrollLeft || document.documentElement.scrollTop)) {
            //IE6 standards compliant mode
            scrOfX = document.documentElement.scrollLeft;
        }
        return scrOfX;
    }
    window.onscroll = function() {
        var x = getScrollX();
        // change the figure
    }
</script>
相关文章：