我有这种情况，我需要将一个元素滚动到视口中。问题是我不知道哪个元素是可滚动的。例如，在 Portrait 中，body 是可滚动的，而在 Landscape 中，它是另一个元素（还有更多情况会改变可滚动元素）
现在的问题是，给定一个需要滚动到视口中的元素，找到其第一个可滚动父级的最佳方法是什么？
我已经设置了一个演示 here。使用按钮，您可以在两种不同的情况之间切换
<div class="outer">
<div class="inner">
<div class="content">
...
<span>Scroll me into view</span>
</div>
</div>
</div>
正文可滚动或.outer
有什么建议吗？
【问题讨论】：
标签： javascript html css
我想你想要这个。
$('button').click(function() {
$("body").addClass("body");
$('.outer').toggleClass('scroller');
check($(".content"));
});
function check(el) {
var overflowY = el.css("overflow-y");
if (overflowY == "scroll") {
alert(el.attr("class") + " has");
} else {
if(el.parent().length > 0)
check(el.parent());
else
return false;
}
}body {
height: 450px;
overflow-y: scroll;
}
div.inner {
width: 200px;
height: 400px;
border: 1px solid #000;
}
div.outer {
width: 200px;
height: 200px;
}
div.outer.scroller {
overflow-y: scroll;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>
toggle
</button>
<div class="outer">
<div class="inner">
<div class="content">
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
</div>
</div>
</div>【讨论】：
只需检查滚动条是否可见，如果不查看父级。
function getScrollParent(node) {
if (node == null) {
return null;
}
if (node.scrollHeight > node.clientHeight) {
return node;
} else {
return getScrollParent(node.parentNode);
}
}
【讨论】：
inline 父节点，clientHeight 将为 0，并在此处返回。最好忽略 clientHeight 为 0 的节点。
let overflowY = window.getComputedStyle(node).overflowY;let isScrollable = overflowY !== 'visible' && overflowY !== 'hidden';if (isScrollable && node.scrollHeight > node.clientHeight) {
while (node && node.scrollHeight <= node.clientHeight) node = node.parentNode;
【讨论】：
这是 jQuery UI scrollParent 方法的纯 JS 端口，cweston spoke of。我选择了这个而不是接受的答案的解决方案，如果还没有内容溢出，它将找不到滚动父级。
与我的端口的一个区别是，如果没有找到具有正确值的 CSS overflow 属性的父级，我将返回 <body> 元素。 JQuery UI，而是返回 document 对象。这很奇怪，因为像 .scrollTop 这样的值可以从 <body> 中检索到，但不能从 document 检索到。
function getScrollParent(element, includeHidden) {
var style = getComputedStyle(element);
var excludeStaticParent = style.position === "absolute";
var overflowRegex = includeHidden ? /(auto|scroll|hidden)/ : /(auto|scroll)/;
if (style.position === "fixed") return document.body;
for (var parent = element; (parent = parent.parentElement);) {
style = getComputedStyle(parent);
if (excludeStaticParent && style.position === "static") {
continue;
}
if (overflowRegex.test(style.overflow + style.overflowY + style.overflowX)) return parent;
}
return document.body;
}
【讨论】：
.scrollTop 可以从文档中读取：document.documentElement.scrollTop 但document.body.scrollTop 返回0 而不管实际情况如何滚动位置（您可以在此处的 devtools 中进行测试）。这意味着 Jquery UI 返回文档而不是正文是有意义的。
$("body").scrollTop() 始终返回 0，$(document).scrollTop() 返回您的实际滚动位置。
document.scrollingElement 以解决@Skeets 点可能更好。也许这仍然因浏览器而异？
票数最多的答案并非在所有情况下都有效scrollHeight > clientHeight 可以是true，即使没有滚动条。
我找到了这个要点解决方案https://github.com/olahol/scrollparent.js/blob/master/scrollparent.js#L13
^ 总功劳归于编写代码的https://github.com/olahol。
重构为es6:
export const getScrollParent = (node) => {
const regex = /(auto|scroll)/;
const parents = (_node, ps) => {
if (_node.parentNode === null) { return ps; }
return parents(_node.parentNode, ps.concat([_node]));
};
const style = (_node, prop) => getComputedStyle(_node, null).getPropertyValue(prop);
const overflow = _node => style(_node, 'overflow') + style(_node, 'overflow-y') + style(_node, 'overflow-x');
const scroll = _node => regex.test(overflow(_node));
/* eslint-disable consistent-return */
const scrollParent = (_node) => {
if (!(_node instanceof HTMLElement || _node instanceof SVGElement)) {
return;
}
const ps = parents(_node.parentNode, []);
for (let i = 0; i < ps.length; i += 1) {
if (scroll(ps[i])) {
return ps[i];
}
}
return document.scrollingElement || document.documentElement;
};
return scrollParent(node);
/* eslint-enable consistent-return */
};
你可以像这样使用它：
const $yourElement = document.querySelector('.your-class-or-selector');
getScrollParent($yourElement);
【讨论】：
在@Web_Designer's answer 的基础上进一步发展，
如果您为该元素传递 jQuery object 并收到以下错误，
Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'
然后尝试仅传递 Dom Node element，如果该元素是单个元素，则 btw 位于数组键 0 处。例如。
getScrollParent(jQuery("#" + formid)[0])
【讨论】：
使用 google chrome 开发工具，当您向下滚动页面的一部分时，检查页面，选择您认为可能正在滚动的 DOM 节点。然后拉起控制台（在开发工具的 Elements 选项卡中按 ESC）并输入 $0.scrollTop。这将打印出该元素的当前滚动位置。如果它不是 0，那么您将知道这是正在滚动的元素。
【讨论】：
Array.prototype.slice.call(document.querySelectorAll('*')).filter(el => el.scrollTop > 0)
这是找到你想要的东西的方法。
document.addEventListener('scroll', (e) => {
console.log(e.target.scrollingElement.scrollTop);
})
【讨论】：
这是我目前所拥有的，似乎可以跨 Web 组件自定义元素 shadowRoots 工作；一旦滚动开始卸载此处理并跟踪特定节点的滚动事件，我们可能会进一步扩展它以添加滚动事件处理程序
function scroller(node){ return node.scrollTop }
function handler(event){
const path = event.composedPath();
const scrollNode = path.find(scroller);
const scrollNodes = path.filter(scroller);
console.warn('scroll!',{scrollNode, scrollNodes});
}
window.addEventListener('mousewheel', handler, {capture: true});
window.addEventListener('keydown', handler, {capture: true});
【讨论】：