Question

我们说我有以下文件：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
  <div class="scrollcontainer">
    ...
    <div class="content"></div>
    ...
  </div>
  ...
</body>
</html>

.scrollcontainer是可滚动的div：

.scrollcontainer {
    overflow-y: scroll;
}

有没有办法找到.scrollcontainer作为当前＆＃34;滚动上下文＆＃34; {a .k.a.父可滚动元素）.content？

我看起来像是：

// Should return the element `.scrollcontainer` in this example
document.querySelector('.content').scrollContext;

如果有一个带有overflow: scroll或overflow: auto的祖先元素，那么它就是那个元素。否则是body / html（取决于浏览器）。

当然，我可以在每个滚动上下文中添加一个数据属性（例如data-scrollcontext），然后找到具有该属性的最近父级。但我很想知道是否在DOM Api中实现了类似的东西。

Answer 1

没有DOM API可以找到可滚动的容器。在这里，“可滚动”的区别是误导性的 - 它应该只被css属性考虑，如var newString = originalString.Replace("<iframe", "<div class='video'><iframe").Replace("</iframe>", "</iframe></div>");，即使它现在不可滚动，或者css属性加上“scrollHeight＆gt; offsetHeight”。

您可以创建一个自定义函数，该函数遍历祖先并检查CSS属性，或者您可以在此处实现任何其他逻辑。

DOM：查找html元素的当前滚动上下文

1 个答案: