javascript - stellar.js はウィンドウのサイズ変更時に要素のオフセットを再調整できますか?

Question

要素のオフセットが再調整されるように、ブラウザー/ウィンドウのサイズ変更時に stellar.js を再初期化する方法はありますか?

Answer 1

まず、水平方向の配置に問題があるようです (垂直方向のサイトであると仮定して)。その場合は、水平スクロールを無効にするだけで済みます。

$.stellar({
    horizontalScrolling: false
});

これで問題が解決しない場合、Stellar.js にはプラグインを更新できる文書化されていない機能があります。

たとえば、Stellar.js を次のように使用したとします。

$.stellar();

次の方法で更新できます。

$.stellar('refresh');

したがって、サイズ変更時に更新するには、次のようにすることができます。

$(window).resize(function() {
    $.stellar('refresh');
});

うまくいけば、これですべてが解決するはずです。

Answer 2

少し調べた結果、これにたどり着きました。私の場合、恒星の要素を含む「スライド」があり、ビューポートの幅/高さ全体にサイズ変更されています。タブレットの向きを変更するためにサイズを変更する必要がありました。

$(window).resize(function(){
    winHeight = $(window).height();
    $("#scrollWrapper > div").height(winHeight);

    // Find out all my elements that are being manipulated with stellar
    var particles = $(window).data('plugin_stellar').particles;

    // Temporarily stop stellar so we can move our elements around
    // data('plugin_stellar') let's me access the instance of stellar
    // So I can use any of its methods. See stellar's source code
    $(window).data('plugin_stellar').destroy();

    $.each(particles, function(i, el){
        // destroy() sets the positions to their original PIXEL values. 
        // Mine were percentages, so I need to restore that.
        this.$element.css('top', '');

        // Once the loop is finished, re-initialize stellar
        if(particles.length - 1 == i){
            $(window).data('plugin_stellar').init();
        }
    });
});

要素が左/上に元のピクセル値に設定されても問題ない場合は、destroy と init を順番に呼び出すことができます。

$(window).data('plugin_stellar').destroy();
$(window).data('plugin_stellar').init();

要素で恒星をインスタンス化する場合 (つまり、の$("#element").stellar();代わりに$.stellar();)、「window」をセレクターに置き換えます。