jquery запускать событие когда элемент при прокрутке виден

Question

Помогите пожалуйста с кодом.

Мне необходимо запускать событие, только в том случаем, когда элемент при прокрутке страницы виден. То есть у нас находится 2 элемента на странице, один в начале другой конце. При прокрутке к самому низу, всплывает событие: элемент виден и в консоли показывается прокрутка. НО! когда поднимаемся наверх, элемент не виден, но событие прокрутке все равно срабатывает. а мне нужно что бы событие прокрутки срабатывало только тогда, когда элемент в поле зрение

Заранее спасибо прикладываю свой код https://jsfiddle.net/synapse3/ezrjgcuf/10/

function inViewport(elem, callback, options = {}) {
    return new IntersectionObserver(entries => {
        entries.forEach(entry => callback(entry));
    }, options).observe(document.querySelector(elem));
}

function scroll_func(){
    $('.container').bind('mousewheel', function (sob){
        var scrolltest = sob.originalEvent.wheelDelta;
        if (scrolltest <= -120){
            console.log(sob.originalEvent.wheelDelta)
            // $('.nav-header li a[data-href="page-3"').click();
        }
    })
}

inViewport('.page-down', function(element) {
    console.log('visible bottom: '+element.isIntersecting)
    $('#vis-down').text(element.isIntersecting);

    if ( element.isIntersecting === true ){
        scroll_func();
    }
});

.container{
  position: relative;
}
.page-content{
  height: 300vh;
}

.page-up{
  height:100px;
  width; 100%;
  background-color:yellow;
}
.page-down{
  height: 100px;
  width; 100%;
  background-color: red;
}

.page-log{
  position:fixed;
  right:0;
  top: 50%;
  border: 1px solid black;
  padding: .5rem;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div class="container">
  <div class="page-up"></div>
  <div class="page-content">qwe</div>
  <div class="page-down"></div>
  
  <div class="page-log">
    <div>visible up:<span id="vis-top"></span></div>
    <div>visible down:<span id="vis-down"></span></div>
  </div>
</div>


<script type="text/javascript" src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

БЛОГ НА HUSL

jquery запускать событие когда элемент при прокрутке виден

Ответы (0 шт):