如何获取可滚动弹窗的scrollY滚动位置

window.scrollY 仅用于监听全局窗口的滚动行为，弹窗内的可滚动 div 属于独立的局部滚动容器，直接读取该容器元素的滚动属性即可获取对应的Y轴坐标。

具体实现方式 #

• 第一步先获取弹窗内实际产生滚动的 div 节点，可通过 document.querySelector() 对应类名/ID、或前端框架提供的DOM引用方法拿到元素实例，假设该节点变量为 scrollableModalEl
• 直接读取该节点的 scrollTop 属性，返回值就是当前弹窗滚动容器的Y轴滚动距离，单位为像素，含义和 window.scrollY 完全一致，仅作用范围限定在当前滚动容器内

// 基础读取示例
const scrollableModalEl = document.querySelector('.modal .scroll-content')
const modalScrollY = scrollableModalEl.scrollTop
console.log('弹窗Y轴滚动距离：', modalScrollY)

• 如果需要实时监听滚动坐标，给该滚动容器绑定scroll事件即可：

scrollableModalEl.addEventListener('scroll', () => {
  const currentScrollY = scrollableModalEl.scrollTop
  // 执行对应业务逻辑
})

注意：必须确保你获取的DOM节点是实际出现滚动条的容器，而非它的父节点或子节点，否则读取的scrollTop会始终为0。如果使用第三方UI组件的弹窗，可通过浏览器开发者工具的元素检查功能，定位到实际产生滚动的节点，匹配对应的类名或ID获取即可。

内容的提问来源于stack exchange，提问作者Arun Sharma