Set Div-элемента в зависимости от wheelscroll с Javascript

Question

$(document).ready(function() { 
 
    animate_in(); 
 
}); 
 

 
function animate_in() { 
 
    addEventListener('wheel', function(event){ 
 
    var targetCube = $('.cube-container.cube-0'); 
 
    var wScroll = event.deltaY/100; 
 
    var currentPosition = targetCube.offset().top; 
 
    var newPosition = currentPosition + wScroll; 
 
    console.log(currentPosition) 
 
    targetCube.css({ 
 
     'top' : newPosition 
 
    }); 
 
    console.log(newPosition) 
 
    }); 
 
}

section .wrapper{ 
 
    position: absolute; 
 
    overflow: hidden; 
 
    display: block; 
 
    width: 100vw; 
 
    height: 100vh; 
 
} 
 
section .wrapper a.cube-container{ 
 
    position: absolute; 
 
    width: 30%; 
 
    background: pink; 
 
} 
 
section .wrapper a.cube-container:after{ 
 
    content: ''; 
 
    display: block; 
 
    padding-top: 100%; 
 
} 
 
section .wrapper a.cube-0{ 
 
    top: -200px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<section> 
 
    <div class="wrapper"> 
 
    <a class = "cube-container cube-0" href="")> 
 
     <div class="box cube-0"> 
 
     </div> 
 
    </a> 
 
    </div> 
 
</section>

У меня есть элемент установлен с помощью CSS, чтобы быть вне страницы. Я пытаюсь оживить его при использовании javascript. Страница сама по себе не прокручивается, поэтому я ломаю колесо. Для того, чтобы сделать эту работу я делаю это:

• На $(document).ready я загружаю функцию, где я добавить EventListener;
• Я получаю элемент;
• Я извлекаю его текущее положение;
• Я получаю колесо deltaY;
• Я вычислил новое положение;
• Я установил верхнее значение css элемента в новое расчетное положение.

Все, кажется, работает, но по какой-то причине, когда я снова прогуливаюсь, он перескакивает на определенное значение (размер элемента зависит от размеров окна и с каждым измерением число отличается). Я проверил, что это не высота элемента. У меня нет доступа или изменения его позиции в другом месте. Но в следующий раз, когда событие произойдет, значение уже отличается (currentPosition следующего события не совпадает с newPosition на предыдущем).

Вот функция:

function animate_in() { 
    addEventListener('wheel', function(event){ 
    var targetCube = $('.cube-container.cube-0'); 
    var wScroll = event.deltaY/1000; 
    var currentPosition = targetCube.offset().top; 
    var newPosition = currentPosition + wScroll; 
    targetCube.css({ 
     'top' : newPosition 
    }); 
    }); 
} 

Если я вычитаем число выведенный с помощью console.log старых и новых позиций нескольких событий от этой линии:

var newPosition = currentPosition + wScroll - CONSTANTDIFFERENCE; 

-I получить его прокрутите вправо, но когда я изменяю размер экрана, число меняется, и я не вижу патерна.

А вот логи положение до и после: С один размер экрана:

scripts.js:41 -515.5 
scripts.js:45 -515.475 
scripts.js:41 -430.96875 
scripts.js:45 -430.94375 
scripts.js:41 -346.4375 
scripts.js:45 -346.4125 

разница постоянна: 84,50625.

А с другим размером скрина (больше):

scripts.js:41 -374.5 
scripts.js:45 -374.475 
scripts.js:41 -148.96875 
scripts.js:45 -148.94375 
scripts.js:41 76.5625 
scripts.js:45 76.5875 

разница снова постоянна, но отличается: 225,50625.

Любые идеи, откуда это число, или, может быть, что я делаю неправильно? Или, может быть, вы знаете способ сделать это по-другому?

Answer 1

Похоже проблема, потому что смещение() сверху дает абсолютное смещение от DOM и вершина была установка значения по отношению к элементу .wrapper он был вложен в Таким образом, добавляя:..

var offsetElement =  $('.wrapper'); 
var offsetPosition =  offsetElement.offset().top; 

И переписывания это:

var newPosition =   currentPosition + wScroll - offsetPosition; 

Я получил его, чтобы прокручивать.

$(document).ready(function() { 
 
    animate_in(); 
 
}); 
 

 
function animate_in() { 
 
    addEventListener('wheel', function(event){ 
 
    var targetCube = $('.cube-container.cube-0'); 
 
    var wScroll = event.deltaY/5; 
 
    var currentPosition = targetCube.offset().top; 
 
    var offsetElement =  $('.wrapper'); 
 
    var offsetPosition =  offsetElement.offset().top; 
 
    var newPosition =   currentPosition + wScroll - offsetPosition; 
 
    console.log(currentPosition) 
 
    targetCube.css({ 
 
     'top' : newPosition 
 
    }); 
 
    console.log(newPosition) 
 
    }); 
 
}

section .wrapper{ 
 
    position: absolute; 
 
    overflow: hidden; 
 
    display: block; 
 
    width: 100vw; 
 
    height: 100vh; 
 
} 
 
section .wrapper a.cube-container{ 
 
    position: absolute; 
 
    width: 30%; 
 
    background: pink; 
 
} 
 
section .wrapper a.cube-container:after{ 
 
    content: ''; 
 
    display: block; 
 
    padding-top: 100%; 
 
} 
 
section .wrapper a.cube-0{ 
 
    top: -200px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<section> 
 
    <div class="wrapper"> 
 
    <a class = "cube-container cube-0" href="")> 
 
     <div class="box cube-0"> 
 
     </div> 
 
    </a> 
 
    </div> 
 
</section>