Detect Whether Scroll Event Was Created by User

Detect whether scroll event was created by user

Unfortunately, there is no direct way of telling that.

I would say if you can redesign your app so that it doesn't depend on this type of flow, go for that.

If not, a workaround I can think of is to keep track of user initiated scrolls and check that to see if the scroll was triggered by the browser or by the user.

Here's an example that I put together which does this pretty well (except for browsers where jQuery history has problems with).

You need to run this locally to be able to test it fully (jsFiddle/jsbin are not good fits as they iFrame the contents).

Here's the test cases that I validated:

  • Page loads - userScroll is false
  • Scroll using mouse/keyboard - userScroll becomes true
  • Click on the link to jump to page bottom - userScroll becomes false
  • Click Back/Forward - userScroll becomes false;

<!DOCTYPE html> 
<html lang="en">
<head>
<meta charset="utf-8" />
<script src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="https://raw.github.com/tkyk/jquery-history-plugin/master/jquery.history.js"></script>
</head>
<body>
<span> hello there </span><br/>
<a href="#bottom"> click here to go down </a>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<a name="bottom"> just sitting </a>
</body>
<script type="text/javascript">

var userScroll = false;

function mouseEvent(e) {
userScroll = true;
}

$(function() {

// reset flag on back/forward
$.history.init(function(hash){
userScroll = false;
});

$(document).keydown(function(e) {
if(e.which == 33 // page up
|| e.which == 34 // page dn
|| e.which == 32 // spacebar
|| e.which == 38 // up
|| e.which == 40 // down
|| (e.ctrlKey && e.which == 36) // ctrl + home
|| (e.ctrlKey && e.which == 35) // ctrl + end
) {
userScroll = true;
}
});

// detect user scroll through mouse
// Mozilla/Webkit
if(window.addEventListener) {
document.addEventListener('DOMMouseScroll', mouseEvent, false);
}

//for IE/OPERA etc
document.onmousewheel = mouseEvent;

// to reset flag when named anchors are clicked
$('a[href*=#]').click(function() {
userScroll = false;
});

// detect browser/user scroll
$(document).scroll( function(){
console.log('Scroll initiated by ' + (userScroll == true ? "user" : "browser"));
});
});
</script>
</html>

Notes:

  • This doesn't track scrolling when the user drags the scrollbar with mouse. This can be added with some more code, which I left as an exercise for you.
  • event.keyCodes may vary by OS, so you may have to change that appropriately.

Hope this helps!

Detect if user is scrolling

this works:

window.onscroll = function (e) {  
// called when the window is scrolled.
}

edit:

you said this is a function in a TimeInterval..

Try doing it like so:

userHasScrolled = false;
window.onscroll = function (e)
{
userHasScrolled = true;
}

then inside your Interval insert this:

if(userHasScrolled)
{
//do your code here
userHasScrolled = false;
}

Detect if a scroll event is triggered manually in jQuery

Maybe :animated selector will help you:

$('#scroller').scroll(function(e) {
if ($(this).is(':animated')) {
console.log('scroll happen by animate');
} else if (e.originalEvent) {
// scroll happen manual scroll
console.log('scroll happen manual scroll');
} else {
// scroll happen by call
console.log('scroll happen by call');
}
});

Demo

Is there any new ways to detect if the scroll event was created by User or Animation

Because you are using jQuery animate you can use:

:animated Selector: Select all elements that are in the progress of an animation at the time the selector is run.

Hence your scroll event will be:

$(window).on('scroll',function(e){
if (!$('html,body').is(':animated')) {
$('.thisClass').removeClass('max-limit');
}
});

How to check where is the scroll when user refreshes the page

Use window.scrollY

The read-only scrollY property of the Window interface returns the
number of pixels that the document is currently scrolled vertically.

Detect scroll event in AngularJS with Find in page

Use 'scroll' event, 'wheel' is no good here.

Also notice that user can use mouse to drag scroll or page down, page up or arrows -- and all this wont trigger 'wheel' but will trigger 'scroll' events.

Check if a user has scrolled to the bottom (not just the window, but any element)

Use the .scroll() event on window, like this:

$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() == $(document).height()) {
alert("bottom!");
}
});

You can test it here, this takes the top scroll of the window, so how much it's scrolled down, adds the height of the visible window and checks if that equals the height of the overall content (document). If you wanted to instead check if the user is near the bottom, it'd look something like this:

$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() > $(document).height() - 100) {
alert("near bottom!");
}
});

You can test that version here, just adjust that 100 to whatever pixel from the bottom you want to trigger on.



Related Topics



Leave a reply



Submit