> For the complete documentation index, see [llms.txt](https://javascriptuse.gitbook.io/advanced/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://javascriptuse.gitbook.io/advanced/phat-hien-phan-tu-xuat-hien-o-man-hinh-detect-element-appearing-on-screen-ok.md).

# Phát hiện phần tử xuất hiện ở màn hình, Detect element appearing on screen, view (ok)

http\://jsfiddle.net/RRSmQ/

Tham khảo thêm:

{% embed url="<http://jsfiddle.net/RRSmQ/>" %}

Cách 1:

![](https://2726517656-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M1E4Gk2ppVKb4olmnun%2F-MkBcIZLrkCM7QvIlCFc%2F-MkBfThOpH72rSB4j4HW%2FScreenshot_1.png?alt=media\&token=89c2dd34-a73a-4b73-bd40-7a05d74813f5)

![](https://2726517656-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M1E4Gk2ppVKb4olmnun%2F-MkBcIZLrkCM7QvIlCFc%2F-MkBfWiYboACXU4FxdWd%2FScreenshot_3.png?alt=media\&token=738c7f51-e059-416a-9fad-b9f729bb9210)

C:\xampp\htdocs\html\index.html

```
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <title>Document</title>
  <style type="text/css">
  .big {
    width: 100%;
    height: 2000px;
    /* bigger as viewport - if browser height is not heigher! */
    background: #c5c5c5;
    overflow: hidden;
    font-size: 48px;
	}
  </style>
</head>
<body>
  <div class="text" id="text1">Text 1</div>
  <div class="big" id="big1">1</div>
  
  <script type="text/javascript">
  function isScrolledIntoView(elem) {
    if ($(elem).length == 0) {
      return false;
    }
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();
    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();
    //  return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop)); //try it, will only work for text
    return (docViewBottom >= elemTop && docViewTop <= elemBottom);
  }
  // $('.text').each(function() {
  //   console.log(isScrolledIntoView(this), this);
  // });
  // $('.big').each(function() {
  //   console.log(isScrolledIntoView(this), this);
  // });
  $(window).on('scroll', function() {
    $('.text').each(function() {
      console.log(isScrolledIntoView(this), this);
    });
    $('.big').each(function() {
      console.log(isScrolledIntoView(this), this);
    });
  });
  </script>
</body>
</html>
```

Cách 2:

![](https://2726517656-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M1E4Gk2ppVKb4olmnun%2F-MkBcIZLrkCM7QvIlCFc%2F-MkBckN0uKsP3ZijfuCW%2FScreenshot_1.png?alt=media\&token=d9b0b4c5-4a60-4641-a431-2ec685700321)

![](https://2726517656-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M1E4Gk2ppVKb4olmnun%2F-MkBcIZLrkCM7QvIlCFc%2F-MkBcnXk3QOjgpY8HCmc%2FScreenshot_2.png?alt=media\&token=4e2fa1b1-4113-435a-bf4b-8bb357eaecbd)

C:\xampp\htdocs\html\index.html

```
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <title>Document</title>
  <style type="text/css">
  .log {
    position: fixed;
    right: 20px;
    top: 20px;
  }
  </style>
</head>

<body>
  <div class="log">log</div>
  scroll to target element<br>
  scroll to target element<br>
  scroll to target element<br>
  scroll to target element<br>
  scroll to target element<br>
  scroll to target element<br>
  scroll to target element<br>
  scroll to target element<br>
  scroll to target element<br>
  scroll to target element<br>
  scroll to target element<br>
  scroll to target element<br>
  scroll to target element<br>
  scroll to target element<br>
  scroll to target element<br>
  scroll to target element<br>
  scroll to target element<br>
  scroll to target element<br>
  scroll to target element<br>
  scroll to target element<br>
  scroll to target element<br>
  scroll to target element<br>
  scroll to target element<br>
  scroll to target element<br>
  scroll to target element<br>
  scroll to target element<br>
  scroll to target element<br>
  scroll to target element<br>
  scroll to target element<br>
  scroll to target element<br>
  scroll to target element<br>
  scroll to target element<br>
  scroll to target element<br>
  scroll to target element<br>
  scroll to target element<br>
  scroll to target element<br>
  scroll to target element<br>
  scroll to target element<br>
  scroll to target element<br>
  scroll to target element<br>
  scroll to target element<br>
  scroll to target element<br>
  scroll to target element<br>
  scroll to target element<br>
  scroll to target element<br>
  scroll to target element<br>
  scroll to target element<br>
  scroll to target element<br>
  scroll to target element<br>
  scroll to target element<br>
  scroll to target element<br>
  scroll to target element<br>
  scroll to target element<br>
  scroll to target element<br>
  scroll to target element<br>
  scroll to target element<br>
  scroll to target element<br>
  scroll to target element<br>
  scroll to target element<br>
  scroll to target element<br>
  scroll to target element<br>
  scroll to target element<br>
  <h3 class="target">target element</h3>
  scroll to target element<br>
  scroll to target element<br>
  scroll to target element<br>
  scroll to target element<br>
  scroll to target element<br>
  scroll to target element<br>
  scroll to target element<br>
  scroll to target element<br>
  scroll to target element<br>
  scroll to target element<br>
  scroll to target element<br>
  scroll to target element<br>
  scroll to target element<br>
  scroll to target element<br>
  scroll to target element<br>
  scroll to target element<br>
  scroll to target element<br>
  scroll to target element<br>
  scroll to target element<br>
  scroll to target element<br>
  scroll to target element<br>
  scroll to target element<br>
  scroll to target element<br>
  scroll to target element<br>
  scroll to target element<br>
  scroll to target element<br>
  scroll to target element<br>
  scroll to target element<br>
  scroll to target element<br>
  scroll to target element<br>
  <script type="text/javascript">
	  $.fn.is_on_screen = function() {
	    var win = $(window);
	    var viewport = {
	      top: win.scrollTop(),
	      left: win.scrollLeft()
	    };
	    viewport.right = viewport.left + win.width();
	    viewport.bottom = viewport.top + win.height();
	    var bounds = this.offset();
	    bounds.right = bounds.left + this.outerWidth();
	    bounds.bottom = bounds.top + this.outerHeight();
	    return (!(viewport.right < bounds.left || viewport.left > bounds.right || viewport.bottom < bounds.top || viewport.top > bounds.bottom));
	  };
	  if ($('.target').length > 0) { // if target element exists in DOM
	    if ($('.target').is_on_screen()) { // if target element is visible on screen after DOM loaded
	      $('.log').html('<div class="alert alert-success">target element is visible on screen</div>'); // log info		
	    } else {
	      $('.log').html('<div class="alert">target element is not visible on screen</div>'); // log info
	    }
	  }
	  $(window).scroll(function() { // bind window scroll event
	    if ($('.target').length > 0) { // if target element exists in DOM
	      if ($('.target').is_on_screen()) { // if target element is visible on screen after DOM loaded
	        $('.log').html('<div class="alert alert-success">target element is visible on screen</div>'); // log info
	      } else {
	        $('.log').html('<div class="alert">target element is not visible on screen</div>'); // log info
	      }
	    }
	  });
  </script>
</body>

</html>
```
