Shopify Debut Theme 添加 padding-bottom: 60px after page loads to the html element

Question

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

的 HTML 元素中

如何获取它以便在页面加载时不将此属性添加到 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);

Shopify Debut Theme 添加 padding-bottom: 60px after page loads to the html element

Shopify Debut Theme Adding padding-bottom: 60px after page loads to the html element

javascript

css

shopify

shopify-template