javascript - Raphaelを使用してスクロールバーで動かないものを描く

Question

ラファエルを使って絵を描いています。図は非常に大きいため、ブラウザウィンドウにスクロールバーが表示されます。ここで、ユーザーがスクロールバーを動かしても、図の一部を静止させておきたいと思います。これはどのように行うことができますか？さらに、スクロールバーの位置に基づいて図を変更したいと思います（たとえば、スクロールバーのx座標を表示します）。これは可能ですか？ありがとうございました。

Answer 1

これが私の質問に対する解決策です。スクロールに関係なく図の一部を静止させるには、2つのキャンバスを作成します。1つはスクロールで移動する部分用で、もう1つは静止部分用です。次に、2番目のキャンバスをに配置し<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>

このコードは、図の2つの部分が分離している場合にのみ機能することに注意してください。それらが重なっている場合でも、2つのキャンバスに描画できるかどうかはわかりません。

スクロールバーの位置に基づいて図を変更するには、次のコードを使用します。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>