Javascript 禁用“sticky”和“fixed”CSS（用于完整网页截图）_Javascript_Html_Css

Javascript 禁用“sticky”和“fixed”CSS（用于完整网页截图）

javascript html css

Javascript 禁用“sticky”和“fixed”CSS（用于完整网页截图）,javascript,html,css,Javascript,Html,Css,背景：我正在使用一个工具自动拍摄一个网页的“整页”截图。它通过滚动网页、截图并将它们缝合在一起来实现这一点。（猜测哪种工具没有奖品）问题：粘性和修复html元素破坏了图像的拼接。（基本上每个屏幕截图“片段”都包含一个横幅/页脚）。见下文问题：有没有一种方法可以指导网页将fixed和stickycss视为固定的？（或者通过在子元素中设置滚动来抵消其效果？）临时解决办法解决方案1:我可以按原样裁剪图像（例如裁剪200px顶部和底部）。但这需要事先知道（/假设）元素的高度解决方案2:在i

背景：我正在使用一个工具自动拍摄一个网页的“整页”截图。它通过滚动网页、截图并将它们缝合在一起来实现这一点。（猜测哪种工具没有奖品）

问题：

粘性

和

修复

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

问题：有没有一种方法可以指导网页将

fixed

和

sticky

css视为固定的？（或者通过在子元素中设置滚动来抵消其效果？）临时解决办法

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

解决方案2:在

iframe

中加载网站，并将iframe高度设置为内部页面的高度。这是完美的，除非我在访问其他网站时遇到问题

假设：

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

例如，我尝试将

fixed

和

sticky

css元素设置为

relative

（/

absolute

），这可以工作90%（但不是100%正确）

var elems=document.body.getElementsByTagName（“*”）；
对于（var i=0；i对于fixed
元素，您可以依靠transform
或filter
来更改包含的块并禁用固定行为（此处解释：）
这是一个基本的例子。通常我们需要将其应用于body


。已修复{
位置：固定；
底部：0；
左：0；
右：0；
背景：红色；
高度：56px；
}
身体{
保证金：0；
高度：220vh；
过滤器：模糊（0）；/*或变换：平移（0）*/
}
对于固定的
元素，您可以依靠变换
或过滤器
来更改包含的块并禁用固定行为（此处解释：）
这是一个基本的例子。通常我们需要将其应用于body


。已修复{
位置：固定；
底部：0；
左：0；
右：0；
背景：红色；
高度：56px；
}
身体{
保证金：0；
高度：220vh；
过滤器：模糊（0）；/*或变换：平移（0）*/
}
错误的工具？假设不清楚。您必须能够自动执行此操作吗？就我所知，只是一个想法，粘性元素必须具有顶部、左侧…属性。如果您可以删除这些属性，粘性将不再粘性。@Capsule-是的，自动执行解决方案（仅供参考，请使用selenium webdriver
）@djnose-没有运气，与设置位置：相对的效果相同；
-谢谢！@NickGrealy这是一个pitty:（.效果如何？你检查过它们是否真的被移除了吗？（像全部、底部、顶部、左、右）错误的工具？假设不清楚。你必须能够自动化吗？只是一个想法，据我记忆所及，粘性元素必须具有顶部、左侧…属性。如果你可以删除这些属性，粘性将不再粘性。@Capsule-是的，自动化解决方案（仅供参考，请使用selenium webdriver
）@djnose-没有运气，与设置位置：相对的效果相同；
-谢谢！@NickGrealy这是一个pitty:（.效果如何？你检查过它们是否真的被移除了吗？（像全部、底部、顶部、左、右）