Javascript 当CSS动画遇到屏幕边缘时，如何停止它？

我创建了这个演示：

单击时，将创建一个红色的下落框

问题是，仅使用css无法检测屏幕大小，事实上，在我的演示中，我指定无论屏幕的实际高度如何，框必须下降到1000px

这是关键帧的代码：

@include keyframes("fall"){
   to{
      top: 1000px;
   }
 }

我不能使用底部：0px因为我不知道秋天从哪里开始，而且我没有解决我的主要问题

这是FallBox.js脚本：

我知道我可以使用溢出：隐藏在父div中，但我认为这不是理想的解决方案。首先是因为用户可以得到一个高度更高的屏幕，然后是因为我希望框在遇到边缘时停止，因为边界是地面，它不应该通过

我在web上找到的另一个解决方案是使用CSSOMAPI，但我们甚至不确定这些API的兼容性

那么，既然javascript无法注入属性，当动画遇到屏幕边缘时，我如何停止它呢

---

谢谢。

如果您正在寻找仅使用css的解决方案，您可以将css

calc

功能（）与

vh

（）结合使用

document.querySelector（“.box”）.addEventListener（“单击”，函数（）{
this.classList.toggle（“已删除”）；
})

*{
框大小：边框框；
保证金：0；
填充：0；
}
.盒子{
位置：绝对位置；
排名：0；
左：200px；
宽度：100px；
高度：100px；
背景：红色；
过渡：前2名；
}
.盒子掉下来了{
顶部：计算（100vh-100px）；
}

---

如果您正在寻找仅使用css的解决方案，可以将css

calc

功能（）与

vh

（）结合使用

document.querySelector（“.box”）.addEventListener（“单击”，函数（）{
this.classList.toggle（“已删除”）；
})

*{
框大小：边框框；
保证金：0；
填充：0；
}
.盒子{
位置：绝对位置；
排名：0；
左：200px；
宽度：100px；
高度：100px；
背景：红色；
过渡：前2名；
}
.盒子掉下来了{
顶部：计算（100vh-100px）；
}

您可以使用CSS功能将每个

div

向上移动其自身

高度的
100%
。这样，您只需要两条规则就可以更改
top
位置的值，而不必担心每种情况下的
高度


（函数（d，M）{
var div=d.createElement（“div”），
wait=0，大小；
d、 body.addEventListener（“单击”，函数（）{
如果（！等待）{
等待=1；
div=div.cloneNode（1）；
div.classList.remove（“go”）；//这是必需的，这样新创建的div就不会被添加到页面底部
尺寸=M.max（M.floor（M.random（）*200），50）；
div.style.height=div.style.width=size+“px”；
div.style.left=M.max（M.floor（M.random（）*this.offsetWidth）-size，0）+“px”；
这名儿童（div）；
setTimeout（函数（）{
div.classList.add（“go”）；//添加此类将启动动画。
等待=0；
},5);
}
},0);
})（文件、数学）
*{框大小：边框框；边距：0；填充：0；}
html，正文{高度：100%}
div{
背景：#000；
边框：1px实心#fff；
过渡：前2s线性；
位置：绝对位置；
排名：0；
转换：translatey（-100%）；
}
前进{
最高：100%；
}
您可以使用CSS功能将每个
div
向上移动其自身
高度的
100%
。这样，您只需要两条规则就可以更改
top
位置的值，而不必担心每种情况下的
高度


（函数（d，M）{
var div=d.createElement（“div”），
wait=0，大小；
d、 body.addEventListener（“单击”，函数（）{
如果（！等待）{
等待=1；
div=div.cloneNode（1）；
div.classList.remove（“go”）；//这是必需的，这样新创建的div就不会被添加到页面底部
尺寸=M.max（M.floor（M.random（）*200），50）；
div.style.height=div.style.width=size+“px”；
div.style.left=M.max（M.floor（M.random（）*this.offsetWidth）-size，0）+“px”；
这名儿童（div）；
setTimeout（函数（）{
div.classList.add（“go”）；//添加此类将启动动画。
等待=0；
},5);
}
},0);
})（文件、数学）
*{框大小：边框框；边距：0；填充：0；}
html，正文{高度：100%}
div{
背景：#000；
边框：1px实心#fff；
过渡：前2s线性；
位置：绝对位置；
排名：0；
转换：translatey（-100%）；
}
前进{
最高：100%；
}
不能使用百分比或
vh
单位吗？不能使用百分比或
vh
单位吗？
function FallBox(x, side, parent){
  this.x = x;
  this.parent = parent || $("body");
  this.side = side || Math.random()*200;
  this.createBox();
  this.fall();
}

FallBox.prototype.createBox = function(){
  box = document.createElement('div');
  $box = $(box); // I hate brackets
  $box.addClass("box");
  $box.css({
      width: this.side+"px",
      height: this.side+"px",
      left: this.x+"px",
      top: "-"+(this.side+5)+"px"
  });
  this.box = $box;
}

FallBox.prototype.fall = function(){
  this.parent.append(this.box);
  this.box.addClass("fall");
}