Shopify Debut Theme 添加 padding-bottom: 页面加载到 html 元素后 60px答案

【问题标题】：Shopify Debut Theme Adding padding-bottom: 60px after page loads to the html elementShopify Debut Theme 添加 padding-bottom: 页面加载到 html 元素后 60px
【发布时间】：2021-06-21 15:53:57
【问题描述】：

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

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

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

$(window).load(function() {

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

});

【问题讨论】：

登录后台访问网站时，可能会被任何第三方代码添加，不登录后台进入新的私密窗口可以试试吗？
是的，当我没有登录时不会发生这种情况。我在其他浏览器上尝试过，它没有添加填充。
好的，这可能是由于任何 iframe 或 APP 附加了一些 3rd 方代码，并且它添加了填充，您可以使用带有重要的 CSS 来避免。一样，如果你真的很努力的话。

标签： javascript css shopify shopify-template

【解决方案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);

【讨论】：