ionic-ion-horizontal-scroll-cards
ionic-ion-horizontal-scroll-cards copied to clipboard
This scroll is not working in samsung devices.
This scroll is not working in samsung devices.
I can confirm this... Samsung Galaxy Note 3 - i was already wondering whats going on.
The Problem is that some Phones do not fire the 'scroll' event but rather a 'touchmove' This is just a sandbox code:
var startX = 0;
angular.element($element).bind("touchstart", function(e){
startX = e.touches[0].clientX;
});
angular.element($element).bind("touchmove", function(e){
var endX = e.touches[0].clientX;
console.log("touch moveeee");
console.log($element[0]);
console.log("offset is");
console.log($element[0].scrollLeft);
console.log($element[0].offsetWidth);
if (endX >= startX)
{
console.log('moving right');
$element[0].scrollLeft = $element[0].scrollLeft + 20; /*e.touches[0].clientX;*/
}
console.log( $element[0].scrollLeft );
});
I am also confirming this issue. Tested Device : Samsung Galaxy S4
Please have a look at this link. http://codepen.io/rajeshwarpatlolla/pen/xGWBja I too faced the same issue and was resolved with this example code. I hope this will resolve the issue.
Thanks @rajeshwarpatlolla . This approach is much cleaner http://codepen.io/calendee/pen/zaHit
Tested & working fine in Samsung Device
You are welcome. I forked the codepen from the above link only.
Same problem here. Tried to check out the above links but it does not seems to work. I probably do something wrong. Here is my snippet:
<ion-scroll direction="x" has-bouncing="true">
<hscroller>
<hcard ng-repeat="media in post.medias" index="{{ $index }}" desc="{{ media.label }}" image="{{ media.url }}"></hcard>
</hscroller>
</ion-scroll>
It would be great if you could past here a real example using ion-scroll
in the context of this plugin.
FWIW, if someone comes here looking for help with scrolling on Android 4.4.2 or Samsung devices, my solution was to just add on-swipe-left="" on-swipe-right=""
to the hscroller
element.
<hscroller on-swipe-left="" on-swipe-right="">
<hcard>
</hcard>
<hcard>
</hcard>
</hscroller>
I don't have the time to figure out why it worked, but it worked.