javascript - 使用 Raphael 绘制不随滚动条移动的东西

Question

我正在使用拉斐尔画一个人物。图很大，所以浏览器窗口显示一个滚动条。现在，即使用户移动滚动条，我也希望图形的一部分保持静止。怎么可能做到这一点？另外，我想根据滚动条的位置来改变图形（例如，显示滚动条的x坐标）。这可能吗？谢谢你。

Answer 1

这是我的问题的解决方案。为了使图形的一部分保持静止而不管滚动，请创建两个画布，一个用于应滚动移动的部分，一个用于静止部分。然后将第二个画布放入<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>