Question

我在这里有一个不同的线程讨论了相同的事情，但使用Javascript。我想要实现的是，如果一个名为#vs的div变得大于一个集合vh（视口），它应该使用不同的CSS（滚动div）。

现在我能够做到这一点，但是使用Javascript，但我只能设置div＆gt;以像素为单位，如果超过此值，则将名为.vscroll的CSS类添加到#vs。

CSS看起来像这样：

#vs {
    clear: both;
    width: 90%;
    margin: 0 auto 0px;
    overflow: hidden;
    position: relative;
}

.vscroll {
    position: absolute;
    height: auto;
  /* Starting position */
  -moz-transform:translateY(100%);
  -webkit-transform:translateY(100%);
  transform:translateY(100%);
  /* Apply animation to this element */
  -moz-animation: scroll-up 25s linear infinite;
  -webkit-animation: scroll-up 25s linear infinite;
  animation: scroll-up 25s linear infinite;
 }
 /* Move it (define the animation) */
 @-moz-keyframes scroll-up {
  0%   { -moz-transform: translateY(100%); }
  100% { -moz-transform: translateY(-100%); }
 }
 @-webkit-keyframes scroll-up {
  0%   { -webkit-transform: translateY(100%); }
  100% { -webkit-transform: translateY(-100%); }
 }
 @keyframes scroll-up {
  0%   {
  -moz-transform: translateY(100%); /* Browser bug fix */
  -webkit-transform: translateY(100%); /* Browser bug fix */
  transform: translateY(100%);
  }
  100% {
  -moz-transform: translateY(-100%); /* Browser bug fix */
  -webkit-transform: translateY(-100%); /* Browser bug fix */
  transform: translateY(-100%);
  }
}

这可能与CSS而不是Javascript有关吗？我在其他帖子中得到了提示，但我不知道如何实现它。谢谢！

如果div高度大于set viewport（vh），请使用不同的css？

0 个答案: