javascript - 禁用 `sticky` 和 `fixed` CSS(完整网页截图)

Question

背景:我正在使用一种工具自动截取网页的“整页”屏幕截图。它通过滚动浏览网页、截取屏幕截图并将它们拼接在一起来实现这一点。 (猜哪个工具没有奖品)。

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

---

问题:有没有一种方法可以指示网页将 fixed 和 sticky css 视为固定的？ (或者通过在子元素内设置滚动来抵消它们的影响？)

临时解决方案...

解决方案 1:我可以在图像移动时裁剪图像(例如裁剪 200 像素的顶部和底部)。但这需要事先知道(/假设)元素的高度。

解决方案二:在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/

更新:我很乐意让粘性/固定对象透明。 ( self 注意:调查)

类似(但不同)的问题:

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 来更改包含 block 并禁用固定行为(此处解释: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 以外的值(完整详情在这里:What are `scrolling boxes`?)

这是一个基本的例子:

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

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

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

上面的例子有点小技巧，因为我们还面临从 body 到 html 的 overflow 传播，这就是为什么我需要明确地设置 overflow 也适用于 HTML，否则将无法正常工作。

这是另一个容器而不是主体的例子:

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

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

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