所以我想在特定的屏幕高度上添加一个类。所以我已经完成了:
window.onscroll = function() {scrollPost()};
function scrollPost () {
var x = window.screen.width;
var i = window.scrollY;
var a = i / x;
animator (a);
slide(a);
}
function slide(x){
var a = (x * 100);
var i = Math.round(a);
console.log(i);
var slideIn = document.querySelector(".slide-in-right");
var slideOut = document.querySelector(".slide-out-left");
if (i >= 90){
slideOut.classList.add("animate");
slideIn.classList.add("animate");
slideIn.style.display = ("block");
}
但是问题来了。就是在不同的屏幕上,数值会不同。因此,在不同的屏幕上,它会在不同的时间切换。我可能可以根据屏幕宽度做出 if
语句。但那样我就需要很多。
我希望仅在容器达到屏幕高度 100% 后才添加动画。你会怎么做?
最佳答案
- 您必须获取用户视口(viewport)(窗口高度)。
- 将其除以一半
- 将其添加到您的 IF 位置。
我写了一个类似的答案,不管它是用 jQuery 编写的,如果你考虑到它会是一个更好的输出。
How to trigger a class that is only in view with wapoints
但是将其实现为纯 js:
获取用户屏幕高度:
var w = window,
d = document,
e = d.documentElement,
g = d.getElementsByTagName('body')[0],
x = w.innerWidth || e.clientWidth || g.clientWidth,
y = w.innerHeight|| e.clientHeight|| g.clientHeight;
alert(x + ' × ' + y);
将y
除以一半,然后添加到当前位置以检查元素是否滚动。
为了以防万一,我会添加这个。获取元素位置。
function getPosition(element) {
var xPosition = 0;
var yPosition = 0;
while(element) {
xPosition += (element.offsetLeft - element.scrollLeft + element.clientLeft);
yPosition += (element.offsetTop - element.scrollTop + element.clientTop);
element = element.offsetParent;
}
return { x: xPosition, y: yPosition };
}
关于javascript - 如何在不同的屏幕尺寸上获得相同的scrollY高度数?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52852925/