禁用“粘性”和“固定” CSS（用于完整的网页截图）

Question

背景：我正在使用一种工具来拍摄网页的自动“全页”屏幕截图。通过滚动浏览网页，截取屏幕截图并将其拼接在一起，可以实现此目的。 （没有猜中哪个工具的奖励）。

问题：sticky和fixed html元素破坏了图像的拼接。 （基本上每个屏幕截图“片段”都包含一个横幅/页脚）。见下文...

---

问题：有什么方法可以指示网页将fixed和sticky CSS视为固定的？ （或通过在子元素中设置滚动来抵消其效果？）

临时解决方案...

解决方案1：我可以按需裁剪图像（例如，在顶部和底部分别裁剪200像素）。但是需要事先知道（/假设）元素的高度。

解决方案2：将网站加载到iframe中，然后将iframe的高度设置为内部页面的高度。效果很好，除非我在访问其他网站时遇到CSP问题。

假设：

• 我们可以在浏览器中执行Javascript（例如，修改dom，css等）
• 仅适用于Firefox和Chrome
• 使用本地Javascript（无库）
• 自动化（无需人工干预）

例如，我尝试将fixed和sticky的css元素设置为relative（/ absolute），该元素可以工作90％（但不是100％正确） ）。

var elems = document.body.getElementsByTagName("*");
for (var i=0;i<elems.length;i++) {
    const pos = window.getComputedStyle(elems[i],null).getPropertyValue('position')
    if (pos == 'sticky' || pos == 'fixed') {
        elems[i].style = "position:relative !important;"
    }
}

我正在使用以下页面进行测试：https://digitalocean.com/pricing/

类似（但不同）的问题：

1. Capture full webpage screenshot in selenium that has sticky header-建议使用其他库和上述（折扣的）建议解决方案
2. Take full localhost webpage screenshot (Firefox, Windows)?-手动解决方案
3. Full WebPage screenshot using javascript-建议的解决方案是使用html2canvas库

Answer 1

对于fixed元素，您可以依靠transform或filter来更改包含块并禁用固定行为（在此处说明：CSS-Filter on parent breaks child positioning）

这是一个基本示例。通常，我们需要将此应用到body。

.fixed {
  position:fixed;
  bottom:0;
  left:0;
  right:0;
  background:red;
  height:56px;
}

body {
  margin:0;
  height:220vh;
  filter:blur(0); /* OR transform:translate(0) */
}

<div class="fixed"></div>

当然，诀窍是应用 null 过滤器或进行转换以避免任何视觉变化。

---

对于sticky元素，您需要考虑overflow属性以禁用效果。这有点棘手，因为它取决于HTML，但在大多数情况下，您需要在父元素上应用overflow以外的其他值visible（此处的详细信息：{{3 }}）

这是一个基本示例：

.fixed {
  position:sticky;
  top:0;
  background:red;
  height:56px;
}

body {
  margin:0;
  height:220vh;
  overflow:auto;
}
html {
  overflow-y:scroll;
}

<div class="fixed"></div>

上面的示例有点技巧，因为我们也面临着overflow从body到html的传播，这就是为什么我也需要为HTML明确设置overflow的原因无法正常工作。

这是另一个除了容器以外的容器的示例：

.sticky {
  position: sticky;
  top: 0;
  background: red;
  height: 56px;
}

.container {
  height: 220vh;
  overflow: auto;
}

<div class="container">
  <div class="sticky"></div>
</div>