Question

为实现滚动效果，我附加了一个全局滚动侦听器，如下所示：

window.addEventListener('scroll', e => updateAllNeeded());

但是在项目过程中，我不得不更改页面的整体结构，以使css中有类似的内容：

html, body { overflow: none; }
.scrollable { overflow: auto; }

由于滚动事件does not bubble up，监听器不再起作用，我正在寻找通用解决方案。我知道例如：

[...document.querySelectorAll('.scrollable')].forEach(
  node => node.addEventListener('scroll' e => { … })
);

可以，但是对于侦听器应该使用的每个元素，都需要一个额外的CSS类。因此，我真正想要的是一个测试，该测试可以为给定节点生成布尔值，如果它具有可以滚动或不滚动的内容，则我可以做到：

function canScroll (node) { /*magic here*/ }

[...document.querySelectorAll('*')].forEach(node => {
  if (canScroll(node)) node.addEventListener('scroll', e => { … })
});

更新

感谢this answer我创建了这样的测试：

[...document.querySelectorAll('*')].filter(n => {
  return n.scrollHeight > n.offsetHeight || 
         n.scrollWidth > n.offsetWidth;
});

效果很好，但我仍然不确定这是否是最好的方法……

所有»scrollable«元素的全局滚动侦听器

0 个答案: