cubiq / SwipeView

Virtually infinite loop-able horizontal carousel
MIT License
698 stars 167 forks source link

Swiping multiple pages at once results in empty page #37

Open generator85 opened 12 years ago

generator85 commented 12 years ago

When the swipeview wrapper has got a fixed width it's possible to span multiple pages with one swipe. But new content is not being loaded in this page so it remains empty.

This issue is not present in non-touch browsers since the mouse-drag is only registered inside the wrapper (it will stop moving once your cursor moves outside the wrapper).

cubiq commented 12 years ago

demo page needed

generator85 commented 12 years ago

I've edited your demo and you can find it here: http://87.250.144.60

When you're on a tablet, just swipe all the way to the left/right of the screen.

cstephe commented 11 years ago

I believe this behavior is in the current posted ereader demo. If you overswipe, start from page left and slide right past the page over a long distance off the swipeable area, it will take you pass the buffer pages and end up blank.

I'm currently working on finding a good general solution for this. on my project adding the following into the __move function prevents it. long hand: var over = point.pageX < this.wrapper.offsetLeft; if (over){ return; }

basically if you are swipping outside your wrapper than stop. However offsetleft is the offset from its parent and not the entire page, so this isn't good for general use. I just started tracking this down and working it tonight so I'll see tomorrow if I find something better.

cstephe commented 11 years ago

OK this is a bit better

var wrapperBound = this.wrapper.getBoundingClientRect();
var absoluteWrapperLeft = wrapperBound.left + window.pageXOffset;
var absoluteWrapperRight = absoluteWrapperLeft + wrapperBound.width;
var over = point.pageX < absoluteWrapperLeft || point.pageX > absoluteWrapperRight;
if (over){
   return;
}

Basically it will restrict the scrollable area to the wrapper (left and right). I have only tested this out on my application on mobile safari and chrome but it seems to work well.

cstephe commented 11 years ago

wanted to post a video I made on this issue. Looks like the behavior I was seeing was on touch only. I'm going to look a little deeper and submit the fix pretty soon.

http://www.youtube.com/watch?v=vVMnDwTJz4c

check it out if you have time.

cstephe commented 11 years ago

https://github.com/cubiq/SwipeView/pull/60