jquery.idle icon indicating copy to clipboard operation
jquery.idle copied to clipboard

Scrolling in element is not picked up

Open dset0x opened this issue 6 years ago • 12 comments

Hello, jquery.idle has been working great for me, except for one case. I have a <pre> element with a scrollbar (overflow:auto) and I use jquery.idle in Firefox as such:

    $(function(){
        $(document).idle({
            onIdle: function(){
                ...
            },
            onActive: function(){
                ...
            },
            onShow: function(){
                ...
            },
            onHide: function(){
                ...
            },
            events: 'click contextmenu dblclick mousedown mouseenter mouseleave mouseover mouseout mouseup wheel drag dragend dragenter dragleave dragover dragstart drop resize scroll select',
            idle: 3500
        })
    });

When a user is using said scrollbar with the mouse, jquery.idle thinks the page is in idle mode. I do not know what component this is a limitation of, but I wonder if there is a way to get it to work (or if I'm doing something wrong).

Thanks in advance!

dset0x avatar Feb 08 '19 18:02 dset0x

Hi, could you please share a jsfiddle or something like that showing the problem ? I guess that the approach to a solution is better this way :)

henriqueboaventura avatar Feb 11 '19 13:02 henriqueboaventura

Hello @kidh0 , you're right about that. (Also I wrote auto above. I meant to say scroll, which makes your point)

  1. Navigate here and open the console so you can see the logging https://jsfiddle.net/9fg8pjcz/2/
  2. Use the scrollbar of the div element and keep scrolling up and down. Notice how you eventually enter the onIdle state even though you are still moving the mouse.
  3. You may stop moving the mouse now.

Edit: Same happens if you mouse-select some text and keep the mouse button down.

dset0x avatar Feb 11 '19 14:02 dset0x

Are you testing on google chrome or other browser? I just tested on google chrome and it worked everytime, using the mousescroll and using the up and down arrows of the keyboard. You were able to reproduce the problem on the jsfiddle?

henriqueboaventura avatar Feb 11 '19 14:02 henriqueboaventura

I am testing both on Google Chrome and Firefox. OS is Linux (Xorg).

Using the scroll wheel and keyboard buttons generate events which are picked up in the document, so jquery.idle remains in onActive state. That is fine.

However, if you hold the left mouse button on the scrollbar and scroll by moving the mouse up and down, you will reach the onIdle state.

dset0x avatar Feb 11 '19 14:02 dset0x

True that, but it will trigger the isActive as soon as you stop holding the button. Right? I guess this is a behavior of the browser, not an issue.

henriqueboaventura avatar Feb 11 '19 14:02 henriqueboaventura

It will trigger isActive, but it's too late, since the user was already not idle.

I understand jquery.idle expects the browser to inform it about events, but I don't know if there is another way for the browsers to communicate this information, so that this problem does not occur. Hence why I opened this issue.

Even if there is no such way, it would be nice to at least have a section regarding jquery.idle's limitations (even if they do not stem from itself).

dset0x avatar Feb 11 '19 14:02 dset0x

It looks like there should be a way. With addEventListener one can specify useCapture=true and (at least) scroll events are then picked up from any element. https://jsfiddle.net/uzkd3xqp/6/

dset0x avatar Feb 11 '19 14:02 dset0x

Seems that it is an open issue on jQuery backlog: https://github.com/jquery/jquery/issues/1735 Right now, the vanilla version of the plugin uses AddEventListeners, maybe you could give it a try using the useCapture parameter: https://github.com/kidh0/jquery.idle/blob/master/vanilla.idle.js

henriqueboaventura avatar Feb 11 '19 15:02 henriqueboaventura

Using the vanilla version, modified to pass useCapture=true, with the drag event enabled seems to do the trick in the jsfiddle example. Thanks.

  • Would you be interested in adding a useCapture option to jquery.idle's interface?
  • Would it make sense for you to convert jquery.idle.js into a thin wrapper around vanilla.idle.js so that both may provide this functionality?
  • I noticed that there is a difference in the interfaces. jquery.idle.js accepts a string for events, but vanilla.idle.js expects a list of strings. It will be important to make sure both are accepted if you merge the two.

dset0x avatar Feb 11 '19 19:02 dset0x

It may be a good think to wrap the vanilla into a jQuery container. I guess that it will be much easier to maintain the code. Probably it will be the next major release (2.x.x). Are you willing to make this update and maybe add some tests ? It is open for pull requests ;)

henriqueboaventura avatar Feb 12 '19 11:02 henriqueboaventura

I would want to work on it. Unfortunately it has been (and by the looks of it will remain) on the back burner due to more pressing issues. I have it noted down and will hopefully get to it when possible.

dset0x avatar May 09 '19 09:05 dset0x

May the reason for idle time not being reset with mouse scroll be linked to the comment in the Stackoverflow post here:

https://stackoverflow.com/questions/667555/how-to-detect-idle-time-in-javascript-elegantly

Check DaxChen's comment Frank Conijn's response.

For example, if you hold the mouse still and only do scrolling, does it reset the timer for you?

ssimsekler avatar May 30 '19 15:05 ssimsekler