Shopify 首次亮相主题添加 padding-bottom：页面加载到 html 元素后 60px

Question

出于某种原因，在页面加载后，样式属性被添加到带有padding-bottom: 60px;的 HTML 元素中padding-bottom: 60px;

我如何获得它以便在页面加载时不将此属性添加到 HTML 元素中。 这令人沮丧，因为我无法使用 CSS 将其删除。

我注意到其他人遇到了这个问题，我尝试复制其中一个将代码添加到 theme.js 的解决方案

$(window).load(function() {

  $('html').removeAttr('style');

});

Answer 1

在我的测试中，这只发生在预览主题并且 Shopify 在正文底部插入一个iframe元素（它的 id 为preview-bar-iframe ）。

它有 60 像素高，脚本会在html元素的底部添加一些填充。 我想是为了让你看到所有的页面。

我使用此脚本在几秒钟后删除预览和填充。

// Remove the annoying Shopify #preview-bar-iframe
window.setTimeout(() => {
    let previewBar = document.getElementById('preview-bar-iframe')
    if (previewBar) {
        previewBar.style['display'] = 'none';
        document.documentElement.removeAttribute('style');
    }
}, 2000);