I have written some fancy hover scrolling effects in jQuery. They work great on a desktop computer. My problem is that on a mobile device, because the user taps on the screen, my code still believes the user is hovering on my .scrollright div and keeps scrolling.
How can I disable this, or otherwise just prevent this problem, on mobile/tablet devices?
$('.thumbnails .scrollright').on('mouseenter', function() {
this.iid = setInterval(function() {
var CurrentScrollLeft = $( ".thumbnails .thumbnailphotos" ).scrollLeft();
$( ".thumbnails .thumbnailphotos" ).scrollLeft( CurrentScrollLeft+10 );
}, 50);
}).on('mouseleave', function(){
this.iid && clearInterval(this.iid);
});
A quick check for touch maybe?
var tap = ("ontouchstart" in document.documentElement);
Then wrap your code in the condition:
if(!tap){
$('.thumbnails .scrollright').on('mouseenter', function() {
this.iid = setInterval(function() {
var CurrentScrollLeft = $( ".thumbnails .thumbnailphotos" ).scrollLeft();
$( ".thumbnails .thumbnailphotos" ).scrollLeft( CurrentScrollLeft+10 );
}, 50);
}).on('mouseleave', function(){
this.iid && clearInterval(this.iid);
});
}
Something like that anyways.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With