Question

我正在编写此代码，它适用于chrome和firefox但不适用于safari。我仍然不知道很多javascript，所以我不明白问题是什么。有人可以帮忙吗？谢谢。

＆＃13;

window.onscroll = function() {myFunction()};

function myFunction() {
    if (document.getElementById("box").scrollTop > 80 || document.documentElement.scrollTop > 80) {
        document.getElementsByClassName("box2")[0].className = "slideUp";
    }
}

＆＃13;

body{height:2000px;}

#copertina{height:800px; width:1000px; margin-left:0px; padding:0; float:left; margin-right:0px; margin-top:0px; background:url(img/_MG_6317.JPG); background-repeat:no-repeat; background-size:100%;}



#box{float:left; width:200px; height:200px; margin-top:50px; }

.box2{float:left; width:200px; height:200px; margin-top:50px; margin-left:100px; visibility:hidden}




.slideUp {animation-name: slideUp;-webkit-animation-name: slideUp;animation-duration: 1s;-webkit-animation-duration: 1s; visibility: visible;}

@keyframes slideUp {0% {opacity: 0;-webkit-transform: translateY(70%);} 100% {opacity: 1;-webkit-transform: translateY(0%);}}

@-webkit-keyframes slideUp {0% {opacity: 0;-webkit-transform: translateY(70%);} 100% {opacity: 1;-webkit-transform: translateY(0%);}}

＆＃13;

<body>

<div id="copertina"><p>Aldo Moro</p></div>

<div id="box">
<div class="box2">
<img src="img/IMG_2997.jpg" width="100%"></div>
</div>


<div id="box">
<div class="box2">
<img src="img/IMG_2983.jpg" width="100%"></div>
</div>
</body>

＆＃13;

代码不仅适用于safari

0 个答案: