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

【问题标题】：onscroll many times in the same page from different divs从不同的 div 在同一页面中多次滚动
【发布时间】：2018-02-25 17:49:45
【问题描述】：

我正在尝试创建一个显示图片的页面，并在您向下滚动时略微向上滑动。我正在使用此代码，但我无法使其适用于多张图片，而且我找不到指定滚动功能必须从 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>

【问题讨论】：

标签： javascript scrolltop slideup onscroll

【解决方案1】：

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

要获取多个元素，您可以使用getElementsByClassName('class')，这将返回一个您可以迭代的节点列表。

例子：

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

【讨论】：

如果解决了您的问题，请将答案标记为完整@ilio。