如何判斷一個元素是否在可視範圍

antzone發表於2017-04-18

分享一段程式碼例項，它實現了判斷一個元素是否在可視區域的功能。

也就是判斷一個元素是否在瀏覽器客戶區之內。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
div {
  width: 100px;
  height: 100px;
  background-color:#ccc;
  position:absolute;
  text-align:center;
  line-height:100px;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function () {
  var windowheight = $(window).height();
  var firstheight = $("div").offset().top;
  var scrolltop = $(window).scrollTop();
  if (firstheight >= scrolltop && firstheight < (scrolltop + windowheight)) {
    $("div").text("位於可視範圍");
  }
});
</script>
</head>
<body>
<div></div>
</body>
</html>

上面的程式碼實現了我們的要求，下面介紹一下它的實現過程。

一.程式碼註釋：

（1）.$(document).ready(function () {})，當文件結構完全載入完畢再去執行函式中的程式碼。

（2）.var firstheight = $("div").offset().top，獲取div元素頂部相對於document的偏移量。

（3）.var scrolltop = $(window).scrollTop()，獲取頁面向上滾動的距離。

（4）.firstheight >= scrolltop && firstheight < (scrolltop + windowheight)，如果div的距離document頂部的偏移量，大於等於頁面向上滾動的尺寸，也就是div不會被客戶區頂部之外的地方有所遮擋；firstheight < (scrolltop + windowheight)也就是div不會被客戶區底部之外的地方有所遮擋。

二.相關閱讀：

（1）.offset()方法參閱jQuery offset()一章節。

（2）.scrollTop()方法參閱jQuery scrollTop()一章節。

相關文章