在 WinJS HTML5/JS Windows Store 应用程序中获取平移内容的滚动偏移量？答案

【问题标题】：Getting the scroll offset of panning content in a WinJS HTML5/JS Windows Store app?在 WinJS HTML5/JS Windows Store 应用程序中获取平移内容的滚动偏移量？
【发布时间】：2012-12-10 17:13:43
【问题描述】：

我已经基于 WinJS HTML scrolling, panning and zooming sample 设置了一些平移内容。当我的滚动内容的滚动位置发生变化时，我想要一个事件监听器。

但是，由于滚动功能是使用 CSS 属性添加的，而不是指定 data-win-control，因此很难确定是否存在我可以监视其属性以在滚动位置更改时获取更新的对象。文档here 似乎暗示没有这样的对象暴露给 JS：

滚动控件为用户平移或滚动视图提供帮助。它仅在设计时通过级联样式表 (CSS) 使用 JavaScript 开发人员向 Windows 应用商店应用程序公开

我一直在尝试收听DOMAttrModified 包含滚动内容的 div 上的事件（设置了 -ms-scroll-snap-type: mandatory 和 overflow-x: auto;），但是当滚动位置发生变化时它似乎不会触发。

当通过 CSS 设置的平移内容的滚动偏移量发生变化时，我可以设置一个事件监听器来通知吗？

我尝试了一些技巧（包括将 JQuery 添加到项目中并使用 .offset()），但无论我使用什么方法，我都可以看到不受滚动偏移影响的项目的位置（页面的基本状态） .

【问题讨论】：

我不知道这个 WinJS 的东西，但是你在滚动哪个元素？像 div（和窗口）这样的常规元素在滚动时会触发 scroll 事件，您可以检查它们的 scrollTop 和 scrollLeft 属性。
嘿，我想成功了！将其发布为答案，我可以接受；）
很高兴知道它有效！刚刚将其添加为答案，并带有一些指向有用文档的链接。

标签： javascript css windows-store-apps winjs

【解决方案1】：

像<div>（和window）这样的常规元素在滚动时会触发scroll 事件，它们的scrollTop 和scrollLeft 属性将指示x 轴和y 轴上的当前滚动位置。 scrollHeight 和 scrollWidth 属性也很有用，它们为您提供了内容的宽度/高度（包括剪辑的部分）。

【讨论】：

好答案。我只想补充一点，您可以在调试模式下运行您的应用程序，然后查看 Visual Studio 中的 DOM Explorer，看看您的控件变成了原生 HTML 元素。它们中的大多数是由 div 元素组成的。您可以找到正确的 div 元素并查看它上面有什么类（它将以“win-”开头），然后检测滚动位置并将滚动事件放在该元素上。祝你好运！