drewrygh / ionic-ion-horizontal-scroll-cards

Horizontal scroll cards inspired by the Spotify app.
MIT License
103 stars 20 forks source link

This scroll is not working in samsung devices. #4

Open rajeshwarpatlolla opened 9 years ago

rajeshwarpatlolla commented 9 years ago

This scroll is not working in samsung devices.

hasokeric commented 9 years ago

I can confirm this... Samsung Galaxy Note 3 - i was already wondering whats going on.

hasokeric commented 9 years ago

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 );
            });
SatadruBhattacharjee commented 9 years ago

I am also confirming this issue. Tested Device : Samsung Galaxy S4

rajeshwarpatlolla commented 9 years ago

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.

SatadruBhattacharjee commented 9 years ago

Thanks @rajeshwarpatlolla . This approach is much cleaner http://codepen.io/calendee/pen/zaHit

Tested & working fine in Samsung Device

rajeshwarpatlolla commented 9 years ago

You are welcome. I forked the codepen from the above link only.

softmonkeyjapan commented 8 years ago

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.

gylippus commented 7 years ago

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.