首頁猿問當(dāng)滾動(dòng)條滾動(dòng)到某元素時(shí)觸發(fā)函數(shù)

當(dāng)滾動(dòng)條滾動(dòng)到某元素時(shí)觸發(fā)函數(shù)

JavaScript

動(dòng)漫人物 2018-08-10 09:14:18

<div style="height:1000px;">11111</div> <div id="showIt">22222</div>如何當(dāng)滾動(dòng)條滾動(dòng)到 showIt 元素的時(shí)候觸發(fā)函數(shù)? 主要不知道怎么計(jì)算?？梢越o個(gè)思路嗎?謝謝。

查看完整描述

1 回答

一只甜甜圈

TA貢獻(xiàn)1836條經(jīng)驗(yàn) 獲得超5個(gè)贊

<!DOCTYPE html>
<html>
<head>
<style type="text/css">

#showIt{width: 200px;height: 200px;background-color: red;position: absolute;top: 1500px;}

</style>
</head>
<body style="height:2000px;">
<div id="showIt"></div>
</body>
<script type="text/javascript">

document.onscroll=function(){    var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;    var cHeight=window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight;    var oDiv=document.getElementById('showIt');    if(scrollTop>(oDiv.offsetTop-cHeight))
    alert('觸發(fā)了')
}

</script>
</html>

先上答案。
廢話不多說，解釋下邏輯。
當(dāng)你滾動(dòng)窗口的時(shí)候，只有你的scrollTop是變化的，當(dāng)你滾動(dòng)的越來越多到了一定程度，那就能看到你的DIV了。
知道這個(gè)道理后就很簡單了。
其實(shí)就是只要你的滾動(dòng)距離大于DIV當(dāng)前的TOP減去視窗大小，你就能看到這個(gè)DIV了。
所以條件按照這個(gè)寫就可以。了

反對(duì) 回復(fù) 2018-09-21