☰

Brave 或 Chrome 中的“捕获全尺寸屏幕截图”在某些页面上不起作用（例如 Airtable）

tag-icon • tag-icon google-chrome screenshot brave
Brave 或 Chrome 中的“捕获全尺寸屏幕截图”在某些页面上不起作用（例如 Airtable）

我爱Chrome 和 Brave 内置的“捕获全尺寸屏幕截图”功能并经常使用它。

然而，某些网站的编码方式似乎让“截取全尺寸屏幕截图”功能无法处理。因此，截取的屏幕截图不包含页面的完整滚动长度。

我多次遇到的一个例子是https://airtable.com。

我想知道是否有解决方法；也许我可以打开 DevTools 面板并调整某个元素的 HTML 或 CSS，然后再按“捕获全尺寸屏幕截图”。虽然这样做很烦人，但我真的不想安装扩展。

答案1

我找到了一个非常有用的答案这里*，成功了！

我打开了 DevTools，并在运行“捕获全尺寸屏幕截图”之前添加了此 CSS 规则：

html, body, div, section {
  overflow: visible !important;
}

该页面上的另一个人也提到：

请注意，您还可以使用 JavaScript 书签小程序来切换此样式规则。

javascript:/*style::toggle*/(function(){var L='s-overflow',S='html,body,div,section{overflow:visible!important;}',SS,E=document.querySelector('style[id="'+L+'"]');if(E){E.parentNode.removeChild(E)}else{SS=document.createElement('style');SS.setAttribute('type','text/css');SS.id=L;SS.textContent=S;document.querySelector('head').appendChild(SS)}})()

2021-09-15 更新：当 notion.site 上的一个页面给我带来麻烦时，我刚刚尝试了该 JavaScript 书签小程序，该书签小程序解决了该问题（并且“捕获全尺寸屏幕截图”功能可以正常工作）。

*2021-10-09 更新：实际上，我决定添加, section它，因为 LinkedIn 等网站使用了该标签。

答案2

@Ryan 的解决方案对我来说很有用，但有时它会破坏布局，因为div（和section）选择器相当宽泛。

修复这个问题：

  1. 打开 DevTools 并选择要截屏的元素（或可滚动区域）（⌘⇧C在 macOS / CTRL⇧CWindow 上，将鼠标悬停在页面上的特定元素上并单击它）
  2. 转到 DevTools 的“控制台”选项卡
  3. 将以下代码粘贴到控制台中，然后
  4. 按 Enter 键⏎
var elem = $0;
while (elem) {
  elem.style.setProperty('overflow', 'visible', 'important');
  elem = elem.parentElement;
}

此代码将overflow: visible !important仅将样式属性添加到相关节点及其所有父节点。

然后捕获全尺寸或节点屏幕截图（⌘⇧P在 macOS /CTRL⇧P在 Window 上，然后搜索screenshot）。

相关内容