可以在调整窗口大小时重新调整stellar.js的元素偏移量

Can stellar.js readjust element offsets on window resize?

本文关键字：调整 stellar js 偏移量 元素 新调整 窗口 小时      更新时间：2023-09-26

有没有办法在浏览器/窗口调整大小时重新初始化stellar.js，以便重新调整元素偏移量？

首先，听起来可能存在水平对齐问题（假设是垂直站点）。如果是这样的话，很可能你只需要禁用水平滚动：

$.stellar({
    horizontalScrolling: false
});

如果这不能解决你的问题，Stellar.js有一个未记录的功能，可以让你刷新插件。

例如，假设您使用的Stellar.js如下：

$.stellar();

您可以用以下内容刷新它：

$.stellar('refresh');

所以，要在调整大小时刷新它，你可以这样做：

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

希望这能帮你解决所有问题。

经过一番侦查，我发现了这个。在我的例子中，我有"幻灯片"，其中包含我的恒星元素，它们的大小与视口的全宽/全高一致。我需要调整它们的大小以改变平板电脑的方向。

$(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();
        }
    });
});

如果元素被设置为left/top的原始像素值并不重要，那么您可以调用destroy&一个接一个地初始化：

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

如果在元素上实例化恒星（即$("#element").stellar();而不是$.stellar();），则用选择器替换"窗口"。

我还注意到手机上的奇怪偏移，这可能是由Firefox/Chrome在向下滚动时调整网络视图大小的方式引起的，当位置栏再次可见时？

您的问题的答案在文档的一节中："配置所有内容"：

// Refreshes parallax content on window load and resize
responsive: false,

因此，默认情况下这是错误的。要启用此功能，请使用.stellar( {responsive:true} )

真正的问题是…为什么默认情况下会禁用此功能？它似乎解决了我注意到的问题，除了iOS。

相关文章：