window.scroll 上的函数并获取垂直偏移量答案

【问题标题】：Function on window.scroll and get the vertical offset [duplicate]window.scroll 上的函数并获取垂直偏移量
【发布时间】：2023-04-05 09:09:01
【问题描述】：

window.scroll=function MyFunc(){
	var y = window.scrollTop();
	alert(y);
}

窗口滚动时如何调用函数以及如何获取窗口垂直滚动的像素数量。我想在达到所需值时播放动画。帮助。

【问题讨论】：

您需要考虑的两件事：#1) 是使用 requestAnimationFrame（因为 window.scroll 会使浏览器在滚动时卡顿）。 #2) 如果您想根据视口上的元素显示触发动画，请查看 IntersectionObserver 和可能的 polyfill。

标签： javascript jquery html

【解决方案1】：

您可以使用window.onscroll 而不使用jQuery。那就是您的代码中缺少的内容。它应该是 window.onscroll 并且要获得垂直滚动像素使用 window.scrollY

window.onscroll = function (e) {
  console.log(window.scrollY);
};

html, body{
  height: 2000px;
}

【讨论】：

【解决方案2】：

您需要将window 对象包装在$() 中才能对其使用scrollTop() 函数。

$(window).scroll(function MyFunc(e){
	var y = $(window).scrollTop();
	console.log(y);
});

html, body{
  height: 2000px;
}

&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;

在 Javascript 中，您可以为窗口上的滚动事件添加一个事件侦听器，并使用window.pageYOffset（为了更好的跨浏览器兼容性）来获取垂直滚动的像素数量。

window.addEventListener("scroll", function MyFunc(e){
  var y = (window.pageYOffset !== undefined)
  ? window.pageYOffset
  : (document.documentElement || document.body.parentNode || document.body).scrollTop;//for cross-browser compatability
  console.log(y);
});

html, body{
  height: 2000px;
}

【讨论】：