Focus of scrolling – any way prevent focus transferring to underlying page?

[kiwinode]

Hi Ernest, Is there any way to prevent focus transferring from scrolling a vertical results list on mobile (hovering) to scrolling the underlying page, which scrolls instead of the results list. I can mess around with it, but sometimes it is quite hard to regain the focus of the results list. Thanks!

[Ernest Marcinko]

Hi!

I believe there might be something conflicting in your case. Can you please check if you see the same behavior on the vertical demo page: https://ajaxsearchpro.com/vertical-layout/
In my case, testing this page:
– Android -> The result content scrolls, and the page does not, even when the scrolling is finished
– IOS -> The result content scrolls, when finished, then the page scolls below
This difference is due to how each device browser handles the scroll events, and I believe the scrollbar script can only handle them this way (even though the options are set differently)
In worst case, the page should only scroll when the scrolling on the results list is finished. If this is not the case, then there is a chance that a 3rd party script or CSS might be conflicting there. Let me know how it goes.

[kiwinode]

Hi Ernest, I’m only looking at this on a real IOS device right now (iPhone 7). That’s very similar behavior to what I am experiencing. I get close to the bottom of the results content and the page underneath starts to scroll. I have to get to the bottom of the page underneath before the result content will scroll the final results (I think these last results are the “get more results” from infinite scroll). The issue is more pronounced when I then attempt to scroll back up the results content after I have scrolled to the bottom of the results (and the underlying page to get those final results). It seems that I must scroll to the top of the underlying page (by attempting to scroll the results content) before the results content will re-engage and begin scrolling up. This would probably be quite a confusing UX case although possibly not a case that comes up often.

(I could move to horizontal and the issue would go away)

Cheers,
Nigel

[kiwinode]

You cannot access this content.

[kiwinode]

You cannot access this content.

[kiwinode]

You cannot access this content.

[kiwinode]

You cannot access this content.

[Ernest Marcinko]

You cannot access this content.

[kiwinode]

You cannot access this content.

[Ernest Marcinko]

Hi Nigel,

Thank you very much. I was actually not checking the correct search bar, I am able to replicate this issue. It turns out that it is only due to a misconfiguration of the scrollbar script. There is a separate parameter to disable the mouswheel and the touch-swipe event bubbling to the parent document.

I will include a fix to this in the upcoming release. Until then, if you want, you can fix this manually as well, just follow these instructions:

1. Open up the wp-content/plugins/ajax-search-pro/js/nomin/jquery.ajaxsearchpro.js file on your server
2. Change it’s contents to this, and then save the file.
3. Under the Compatibility settings submenu, change this option to ‘Non-minified’.
4. Clear all layers of site cache.

It may take some time for the cache to clear, but after this change, the scrolling should not affect the parent document now.

[kiwinode]

You cannot access this content.

[Author]

Posts