javascript - 禁用 `sticky` 和 `fixed` CSS（用于完整网页截图）

Question

背景：我正在使用一种工具对网页进行自动“整页”屏幕截图。它通过滚动网页、截取屏幕截图并将它们拼接在一起来做到这一点。（猜猜哪个工具没有奖品）。

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

---

fixed问题：有没有一种方法可以指示网页将stickycss 视为已修复？（或者通过在子元素中设置滚动来否定它们的效果？）

临时解决方案...

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

解决方案2：加载网站iframe，并将iframe高度设置为内页高度。CSP这非常有效，除了我在访问其他网站时遇到问题。

假设：

• 我们可以在浏览器中执行Javascript（例如修改dom、css等）
• 仅适用于 Firefox 和 Chrome
• 使用本机 Javascript（无库）
• 自动化（不涉及人工）

fixed例如，我尝试将stickycss 元素设置为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. 在 selenium 中捕获具有粘性标题的完整网页截图- 建议使用其他库和上述（折扣）建议的解决方案
2. 获取完整的 localhost 网页截图（Firefox、Windows）？- 手动解决方案
3. 使用 javascript 的完整网页截图- 建议的解决方案是使用 html2canvas 库

标签： javascripthtmlcss

Answer 1

对于fixed元素，您可以依赖transform或filter更改包含块并禁用固定行为（此处解释：CSS-Filter on parent breaks child position）

这是一个基本的例子。一般我们需要把它应用到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>

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

---

对于sticky元素，您需要考虑溢出属性来禁用效果。这里有点棘手，因为它取决于 HTML，但在大多数情况下，您需要应用父元素overflow以外的值（此处的完整详细信息：什么是“滚动框”？）visible

这是一个基本示例：

.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传播，这就是为什么我也需要为 HTML 显式设置，否则它将不起作用。bodyhtmloverflow

这是另一个使用主体以外的容器的示例：

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

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

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