javascript - 检测 DIV 的 HTML 和 CSS 并进行更改以使其与同级 DIV 一起滚动

Question

我正在构建一个 Google Chrome 扩展程序，它的功能之一是通过截取视口(viewport)的屏幕截图图像然后向下滚动页面并重复该过程直到它具有整个页面的图像来生成整页长度的屏幕截图长度并使用 HTML5 Canvas 将它们拼接在一起作为 1 张图像。

position: fixed 的页面元素更改为 position: absolute，这样它就不会在重复的最终图像中的每个视口(viewport)图像中显示固定元素结束!

例如，现在我有一个页面给出了新的挑战。 https://docs.hhvm.com/hhvm/installation/linux#ubuntu-15.10-wily-werewolf

根据下图...
1) 顶部标题栏是固定的，因此它更改为position: absolute
2)主页右侧滚动条将右侧主内容面板向下滚动到页面下方。
3) 左侧边栏的 DIV 有一个单独的滚动条。

当我的扩展程序在此页面上制作屏幕截图时，它最终会在页面下方一直重复左侧边栏的内容，因为右侧滚动条在页面下方走得更远。

我认为解决方案是在这些情况下以某种方式检测并定位左侧边栏，使其没有滚动条，而是在右侧内容 DIV 向下滚动时显示所有左侧边栏内容。

我现在不确定如何做左侧边栏部分，有什么建议吗？我还需要在其他页面上自动检测这种情况!

Answer 1

我想 CSS 溢出就是您要找的东西。尝试设置溢出:对该侧边栏可见。现在，“auto”值可能会保留在那里。

如何检测...您可以检查元素的 scrollHeight 并获取其高度，例如 sidebar.scrollHeight > sidebar.offsetHeight。如果为真，则表示它是可滚动的。