Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Scrolling in element is not picked up #34

Open
dset0x opened this issue Feb 8, 2019 · 12 comments
Open

Scrolling in element is not picked up #34

dset0x opened this issue Feb 8, 2019 · 12 comments

Comments

@dset0x
Copy link

dset0x commented Feb 8, 2019

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!

@henriqueboaventura
Copy link
Owner

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 :)

@dset0x
Copy link
Author

dset0x commented Feb 11, 2019

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.

@henriqueboaventura
Copy link
Owner

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?

@dset0x
Copy link
Author

dset0x commented Feb 11, 2019

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.

@henriqueboaventura
Copy link
Owner

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.

@dset0x
Copy link
Author

dset0x commented Feb 11, 2019

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
Copy link
Author

dset0x commented Feb 11, 2019

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/

@henriqueboaventura
Copy link
Owner

Seems that it is an open issue on jQuery backlog: jquery/jquery#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

@dset0x
Copy link
Author

dset0x commented Feb 11, 2019

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.

@henriqueboaventura
Copy link
Owner

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 ;)

@dset0x
Copy link
Author

dset0x commented May 9, 2019

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.

@ssimsekler
Copy link

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?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants