Javascript 如何在不同的屏幕尺寸上获得相同的滚动高度数字?
所以我想在特定的屏幕高度上添加一个类。所以我做了:Javascript 如何在不同的屏幕尺寸上获得相同的滚动高度数字?,javascript,Javascript,所以我想在特定的屏幕高度上添加一个类。所以我做了: 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)
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");
}
然而,问题是。在不同的屏幕上,值将不同。因此,在不同的屏幕上,它将在不同的时间切换。根据屏幕的宽度,我可能会做出一些声明。但是我需要很多
我希望动画添加后,容器是100%的屏幕高度。你会怎么做
您必须获取用户视口窗口的高度。
把它除以一半
将其添加到您的IF位置。
我写了一个类似的答案,不管它是如何写的jQuery,如果您考虑它将是一个更好的输出
但是,要将其实现到普通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 };
}
来源:也许这会帮助你:谢谢!这些都是我以前没用过的新东西。因此,我将首先尝试使用控制台日志!这些是jQuery更好使用的地方吗?不一定更好,但更简单更快,jQuery基本上是一个js特性库,因此它为您的文件添加了更多的功能和更少的代码,如果你正在阅读其他人写得不正确的代码,那么jQuery代码可能很难阅读。如果你想了解js与jQuery的区别,这篇文章就没那么糟糕了。