Distinguish scrolling mouse wheel or scrolling scroll?

Question

I searched Stackoverflow but did not seem to find a satisfactory answer to this question. Basically, I would like to know if scrolling was done through the mouse wheel or browser scroll bar.

Answer 1

Something like this may work for you, but this is not the best solution.

If event a wheeloccurs immediately before the event scroll, then scrolling is performed using the wheel, otherwise it is done using something other than the wheel. There is a slight time difference between triggered events, so I use a threshold currTime - lastWheelTime > 30.

$('.test').on('scroll wheel DOMMouseScroll mousewheel', function(e) {
    var lastWheelTime,
        currTime = (new Date()).getTime(); 

    if( e.type === 'scroll' ) {
        lastWheelTime = $(this).data().lastWheelTime || 0;

        if( currTime - lastWheelTime > 30 ) {
           $('.info').text('no wheel');
        } else {
           $('.info').text('with wheel');
        }

    } else {
        $(this).data().lastWheelTime = (new Date()).getTime(); 
    }
});

.test {
    width: 200px;
    height: 300px;
    border: 1px solid red;
    overflow: auto;
}
 
.inner {
    height: 600px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="info"></div>
<div class="test">
    <div class="inner"></div>
</div>

Run codeHide result

Answer 2

, . ( @t.niese , )

var withWheel = true;
$('.test').on('scroll', function() {
  $(".info").text("with wheel: " + withWheel);
})


$('.inner').on('mouseover', function() {
  withWheel = true;

}).on('mouseleave', function(e) {
  e.stopPropagation();
  withWheel = false;

});

.test {
  width: 200px;
  height: 300px;
  border: 1px solid red;
  overflow: auto;
}
.info {
  position: fixed;
}
.inner {
  height: 600px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="info"></div>
<div class="test">
  <div class="inner"></div>
</div>

Hide result

Answer 3

, , . . jquery .

The scroll event is sent to an element when the user scrolls to a different place in the element. It applies to window objects

, , .

Answer 4

, ( ), , ( , ?).