在同一页面中从不同的 div 滚动多次

onscroll many times in the same page from different divs

我正在尝试创建一个页面,其中显示图片并在您向下滚动时稍微向上滑动。我正在使用这段代码,但我无法让它适用于不止一张图片,而且我也找不到一种方法来指定滚动功能必须从 div 开始,而不是从 div 的顶部开始页面(我不太了解 javascript)。谁能帮我?谢谢

<script>
window.onscroll = function() {myFunction()};

function myFunction() {
    if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
        document.getElementById("box").className = "slideUp";
    }
}
</script>
<style>
html{width:100%;}

body{height:1500px;}
contenitore{height:890px; width:600px; margin-left:90px; padding:0; float:left; margin-right:90px; margin-top:60px;}

.box{float:left; width:200px; height:200px; margin-top:350px;  }

.box2{float:left; width:200px; height:200px; margin-top:350px; margin-left:100px; visibility:hidden;  }

.box3{float:left; width:200px; height:200px; margin-top:350px; margin:50px;    }


.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%);}}
</style>
<!DOCTYPE html>
<html>

<body>
<div class="box2">
<div id="box"><img src="img/IMG_2997.jpg" width="100%"></div>
</div>

<div class="box2">
<div id="box"><img src="img/IMG_2983.jpg" width="100%"></div>

</div>


</body>
</html>

您正在使用 getElementById('id') 获取具有指定 ID 的第一个元素,因为 ID 应该是唯一的并且在文档中只使用一次。

要获取多个元素,您可以使用 getElementsByClassName('class'),这将 return 一个您可以遍历的节点列表。

示例:

var myNodeList = document.getElementsByClassName('class');
for (var i = 0; i < myNodeList.length; i++) {
  var item = myNodeList[i];
  //do something with item
}