找出当前页面滚动条在哪个元素上

224 阅读1分钟

function findScroller(element) {
  element.onscroll = function () {
    console.log(element)
  }
  Array.from(element.children).forEach(findScroller)
}
findScroller(document.body)

在给Array.from(element.children).forEach方法传入参数时,findScroller实际上是一个函数引用。forEach方法需要接收一个函数作为参数,它将会对数组中的每个元素执行这个函数。

findScroller函数定义了一个事件处理程序,并将其分配给传递给它的元素的onscroll属性。然后,它通过递归调用findScroller函数,对element的每个子元素执行相同的操作。

因此,Array.from(element.children).forEach(findScroller)的含义是,对于element的每个子元素,都调用findScroller函数,将子元素作为参数传递给它。

如果要完整写出这段代码,可以这样做:


function findScroller(element) {
  element.onscroll = function () {
    console.log(element)
  }
  Array.from(element.children).forEach(function (childElement) {
    findScroller(childElement)
  })
}
findScroller(document.body)

这里使用了匿名函数作为forEach方法的参数,传递了childElement作为参数给匿名函数,然后在匿名函数中调用findScroller(childElement)。这与直接传入findScroller函数的效果是一样的。