Is it possible to tell whether a scroll event was done by the browser or by the user? Specifically, when using the back button a browser may jump to the last known scroll position. If I bind to scroll event how can I tell whether this was caused by user or browser? <pre class="prettyprint"><code>$(document).scroll( function(){ //who did this?! }); </code></pre> I see three types of situations that cause scrolling in a browser. <ol> <li>The user performs some action. For example, uses mousewheel, arrow keys, page up/down keys, home/end keys, clicks the scrollbar or drags its thumb.</li> <li>The browser scrolls automatically. For example, when using the back button in your browser it will jump to the last known scroll position automatically.</li> <li>Javascript scrolls. For example, <code>element.scrollTo(x,y)</code>.</li> </ol>

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: <ul> <li>Page loads - <code>userScroll</code> is <code>false</code> </li> <li>Scroll using mouse/keyboard - <code>userScroll</code> becomes <code>true</code> </li> <li>Click on the link to jump to page bottom - <code>userScroll</code> becomes <code>false</code> </li> <li>Click Back/Forward - <code>userScroll</code> becomes <code>false</code>;</li> </ul> <hr> <pre class="prettyprint"><code><!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> hello there <a href="#bottom"> click here to go down </a> <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> </code></pre> Notes: <ul> <li>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.</li> <li> <code>event.keyCodes</code> may vary by OS, so you may have to change that appropriately.</li> </ul> Hope this helps!

Detect whether scroll event was created by user

Is it possible to tell whether a scroll event was done by the browser or by the user? Specifically, when using the back button a browser may jump to the last known scroll position. If I bind to scroll event how can I tell whether this was caused by user or browser?

$(document).scroll( function(){      //who did this?! });

I see three types of situations that cause scrolling in a browser.

The user performs some action. For example, uses mousewheel, arrow keys, page up/down keys, home/end keys, clicks the scrollbar or drags its thumb.
The browser scrolls automatically. For example, when using the back button in your browser it will jump to the last known scroll position automatically.
Javascript scrolls. For example, element.scrollTo(x,y).

How do I know my user scroll?

To detect if a user is scrolling with JavaScript, we can watch for scroll events by adding event handlers. to add the userHasScrolled variable. Then we set the window. onscroll property to a function that runs when we scroll.

How do you check if page is scrolled JS?

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

How do you check if user is scrolling in react?

To detect when a user scrolls to bottom of div with React, we can check if the sum of the scrollTop and clientHeight properties of a scrollable element is equal to the scrollHeight property of the same element. We call the useRef hook to create a ref and we assign the returned ref to the inner div, which is scrollable.

Is scroll an event listener?

Since scroll is a JavaScript event, we can listen to a scroll event on any Document Object Model element by adding an event listener to it. In the code mentioned above, there is a div element. There is an event listener in the JavaScript section to listen to scroll events on that particular div element.

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 whether scroll event was created by user

Tags:

javascript

jquery

mrtsherman

People also ask

1 Answers

Mrchief

Recent Activity

Donate For Us

Detect whether scroll event was created by user

Tags:

javascript

jquery

mrtsherman

People also ask

1 Answers

Mrchief

Related questions

Recent Activity

Donate For Us