Как я могу определить, прокручивает ли пользователь до конца элемент <embed>?

Question

Как я могу определить, прокручивает ли пользователь до конца элемент <embed>?

<embed src="contract.pdf" type="application/pdf" width="800" height="800" id="contractPDF">  

Я использовал этот код, но он не работает:

$('#contractPDF').bind('scroll', function() {
  if ($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {   
    alert("end reched");
  }
});

Answer 1

Во-первых, вам нужно знать, где начинается и где заканчивается ваш элемент, чтобы при прокрутке вниз вы знали, прошли ли вы эту точку.

$(window).scroll(function() {

    // Fetch the embed container.
    var container = $('#contractPDF');

    // Height of our window.
    var windowHeight = $(window).height();
  
  // Container information.
  var containerHeight = $(container).height();
  var containerBottom = container.offset().top + containerHeight;

    // Location of our window in our page.
    var windowLocation = $(this).scrollTop();

   // Check if we are past it.
   if (windowLocation + windowHeight > containerBottom) { 
    alert('reached');
   }

});

#contractPDF {
  height: 900px;
  width: 200px;
  background-color: blue;
  position:relative;
  display:block;
}

#contractPDF2 {
  height: 900px;
  width: 200px;
  background-color: red;
  position:relative;
  display:block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="contractPDF"></div>
<div id="contractPDF2"></div>