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

Tham khảo thêm:

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

Cách 1:

![](/files/-MkBfThOpH72rSB4j4HW)

![](/files/-MkBfWiYboACXU4FxdWd)

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:

![](/files/-MkBckN0uKsP3ZijfuCW)

![](/files/-MkBcnXk3QOjgpY8HCmc)

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>
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://javascriptuse.gitbook.io/advanced/phat-hien-phan-tu-xuat-hien-o-man-hinh-detect-element-appearing-on-screen-ok.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
