Wykrycie przesunięcia do diva

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
<div class="container">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum eum consequatur vitae, a nisi atque ad autem ullam, aperiam velit at sunt laudantium tempore, fuga rem veniam dolore aut omnis fugit quam. Consequuntur numquam illo placeat officiis fugiat earum, quia expedita sapiente alias, perferendis quisquam, impedit recusandae. Tenetur, autem qui quidem quam harum incidunt, ut, labore ad facere magni minus consequatur dolores itaque saepe tempore eveniet laudantium quibusdam. Esse, at. Vel aperiam harum modi aliquid, distinctio? Corporis dicta veritatis labore incidunt sed eos distinctio aspernatur consequatur delectus, est magnam quod odio aperiam aliquam voluptates perferendis, eaque quo quisquam placeat velit repellat iure esse. Placeat alias assumenda eveniet, animi in pariatur sit, dolores facilis hic aliquam at sint. Repellat deserunt placeat velit ipsa dicta neque maxime aliquam molestias, optio itaque earum dolorem, voluptate porro soluta nemo, minus impedit cumque animi ab </p>
</div>

<div id="startLoading">Hej</div>

<style type="text/css">
  .container{
    text-align: center;
    max-width: 100px;
    margin:auto;
  }
</style>

<script type="text/javascript">
function isScrolledIntoView(elem) {
    var docViewTop = (document.documentElement && document.documentElement.scrollTop) || document.body.scrollTop;
    var docViewBottom = docViewTop + window.innerHeight;
    var elemTop = elem.offsetTop;
    var elemBottom = elemTop + elem.offsetHeight;
    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}

window.addEventListener('scroll', function LoadDiv(){
    if (isScrolledIntoView(document.querySelector('#startLoading'))) {
      alert('Hej wlasnie przewinięto do diva #startLoading');
      //uncoment to remove event
      //this.removeEventListener('scroll', LoadDiv);
    }
});

</script>
</body>
</html>

Link

Komentarze wyłączone