TransWikia.com

Как отследить прокрутку колесика мышки в px?

Stack Overflow на русском Asked on February 15, 2021

Помогите разобраться с wheel. Прочитал статью об mousewheel, автор которой утверждает, что

Свойство deltaY – количество прокрученных пикселей по вертикали.

Но в у меня почему то так не выходит. Мне выдает число от 100-500, в зависимости от скорости прокрутки. Максимум что я могу отследить, прокрутку вверх и вниз.

Кто то сталкивался с такой проблемой ? Как отследить прокрутку именно в пикселях?

$(document).ready(function () {
    $(window).on('wheel', function(e){
        console.log(e.originalEvent.deltaY);
    });
})
body{
  display: block;
  height: 100%;
  width: 100%;
  overflow: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

2 Answers

window.onwheel=({deltaY})=>console.log(deltaY);

Свойство deltaY - кол-во прокрученных пикселей по вертикали

Пример:

let coll = {};

window.onwheel=({deltaY})=>{
    const newdown = (deltaY > 0);
    console.log(coll, newdown);
    if(coll.down === newdown) coll.sum += deltaY;
    else coll.sum = deltaY;
    coll.down = newdown;
};
  • coll.down - движемся ли мы вниз
  • coll.sum - на сколько пикселей движемся

Answered by Vadim on February 15, 2021

Мне выдает число от 100-500, в зависимости от скорости прокрутки

Ну и что вам не нравится?
Это и есть пиксели, просто у вас прям мышка какая-то очень чувствительная, обычно дельта поменьше ( у меня в вашем примере выдавало в среднем 2-5 )

Положительное deltaY означает что мы прокручиваем вниз, отрицательное - вверх

Вообще, все зависит от св-ва deltaMode, он отвечает за единицы измерения, в которых считается delta

DOM_DELTA_PIXEL (0x00) The delta values are specified in pixels.
DOM_DELTA_LINE (0x01) The delta values are specified in lines.
DOM_DELTA_PAGE (0x02) The delta values are specified in pages.

Answered by ThisMan on February 15, 2021

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP