Vertical scrolling not working

[mydigitalself]

As soon as I include the following line in my test page <script src="slidingview.js"></script>

I can no longer vertical scroll the page. Is this known or is there a bug here? I've tried playing with all sorts of overflow:scroll changes, but to no avail. As soon as I comment out the above line and refresh, then I can vertical scroll just fine.

[triceam]

Looks like github stripped the code from your comment... can you try resending?

[mydigitalself]

Escaped the braces... thanks!

[triceam]

This is working as intended. The sliding view takes up 100% width & 100% height for the current viewport, with the intent that the content inside of the sliding view containers (sidebar and main body area) would be scrollable. In general with App-UI, anything that gets animated is clipped, rather than extending beyond the currently visibile viewport area. This is to prevent flickering/stuttering issues during animations & transitions on mobile devices.

[triceam]

However, this can all be adjusted/customized in CSS.

[mydigitalself]

Hi!

I'm a bit confused. Say my body panel to the right has pages and pages worth of content in it, now it won't vertical scroll at all. Take for example in your samples. 03 - SlidingView - 01 - basic.html. Now in the body div, have a large amount of content that can't fit on a single screen on an iPhone. You can't vertically scroll that content, rending the body div unusable.

Is there a way you can work around that with CSS? I've tried making the overflow: scroll, but that doesn't seem to work...

Mike

[triceam]

Can you post a code snippet, or an example online? You should be able to to determine scrolling purely via css. I often use iScroll for mobile devices (cross platform), but if iOS only, CSS should do the trick. It could also be an issue of setting scroll policy on nested html structure.

[mydigitalself]

It's a bit tough, my code is pretty massive, but I proved it by a small edit to your sample code.

Easiest way is if you take the example I referred to above from your git respository (03 - SlidingView - 01 - basic.html), go to the body div and just insert a massive amount of HTML into the content rather than just "body here!". Now open that page on your mobile and note it won't scroll vertically. If you edit the css file and change overflow:hidden to overflow:scroll in the body div, it has no effect at all.

Is that helpful? I can zip and attach the modifications I made if you like.

[triceam]

OK, took me a minute to figure out what was going on. I was able to recreate the issue. First, set the following styles on the "body" div:

overflow:auto; -webkit-overflow-scrolling: touch;

The comment-out or delete line 13 in slidingview.js: document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);

This is intercepting all touch events, which prevents the browser's touch-based scrolling from working.

This should get you going again, and I'll need to go back and remove that line of code in the github source tree.

[mydigitalself]

Cool, thanks!

I actually found if you add the following it works better: overflow-x: hidden; overflow-y: auto;

Otherwise I was having some weird positioning issues when dragging the div back again from right to left.

[mydigitalself]

Slightly off-topic, but one thing I've found is that if you do swipe left to right, you often slightly swipe upwards or downwards and this causes the content page to scroll up or down a little bit as you swipe. Would be great to somehow prevent this as it feels a little unusual. I'm guessing the normal iOS swipe left/right gesture compensates for this and somehow prevents vertical scrolling during such a swipe.

[triceam]

The easiest thing to do would be to start the swipe gesture earlier, to reduce the vertical scroll. In onTouchMove in slidingView.js, there are two if statements, that check for a value > 50. If you reduce that 50 to a smaller number, the horizontal swipe gesture would happen sooner, reducing the vertical scroll action.

These two lines: if ( Math.abs( currentPosition.y - this.gestureStartPosition.y ) > 50 ) { else if ( Math.abs( currentPosition.x - this.gestureStartPosition.x ) > 50 ) {

Currently, the swiping doesn't actually happen until you've dragged/swipped 50 pixels. (I know, I should use a var instead of a hard coded number)

[CodeFactoryStudios]

I'm having the same issue but with the Slidingview + ViewNavigator combo where the body is not scrollable and the solution above doesn't seem to work.

I deleted the touchMove listeners from both slidingview.js and viewnavigator.js. Also, I've tried playing with the overflow settings of some of the internal classes, e.g. contentHolder, etc... All without success

[mydigitalself]

Can you post your code somewhere as a sample and I can try take a look?

Mike Bartlett Sent with Sparrow (http://www.sparrowmailapp.com/?sig)

On Friday, 14 December 2012 at 18:11, CodeFactoryStudios wrote:

I'm having the same issue but with the Slidingview + ViewNavigator combo where the body is not scrollable and the solution above doesn't seem to work. I deleted the touchMove listeners from both slidingview.js and viewnavigator.js. Also, I've tried playing with the overflow settings of some of the internal classes, e.g. contentHolder, etc... All without success

— Reply to this email directly or view it on GitHub (https://github.com/triceam/app-UI/issues/31#issuecomment-11386112).

[triceam]

Can you post an example of your code? I have a sliding view + viewnavigator working here:
http://triceam.github.com/app-UI/examples/samples/03%20-%20slidingView/02%20-%20view%20navigators/index.html

In this example, touch scrolling works on mobile devices, but you use normal scroll wheel or touchpad on desktop computers.

Source code available here: https://github.com/triceam/app-UI/tree/master/samples/03%20-%20slidingView/02%20-%20view%20navigators

[CodeFactoryStudios]

Thanks for the quick response Andrew. I managed to figure out what the problem was. I had my markup (a table, a UL, and some inline stuff) directly in the body div and I guess the scrolling script wasn't being able to properly calculate the height of the whole thing. I enclosed everything in a div before putting it in the body div and that did it!

[DanR1989]

first, thanks for the fluent working sidebar/body script and thanks for the scrolling fix! But if i scroll on mobile device (in this case iPhone 5, Safari iOS 6.1) "fast" to the bottom or top of the content oder sidebar, the hole browser bounces... thats not a normal reaction i think... - to test it, just scroll fast to the top and than to the bottom and again up I want the content (body) to be bouncing, not the Safari Elements - Any suggestions or did I just something wrong and nobody else has this problem? Thank you!

[hsihsah]

Hi DanR1989, I also wanted to scroll the y axis in the 'body' div and had the same problem as you. I found the following worked for me...

slidingview.css:

1) Remove overflow:auto; and -webkit-overflow-scrolling: touch; from the "body" style. (I actually removed the whole "body style")

2) Remove overflow:hidden; from .slidingview_body and .slidingview_wrapper

3) Add overflow-x: hidden; and overflow-y: auto; to .slidingview_body and .slidingview_wrapper

[hsihsah]

4) Also put -webkit-overflow-scrolling: touch; in .slidingview_body

;)

[DanR1989]

oh, great! thank you, hsihsah :)

[rkumar670]

When you guys are pushing the html in view put first div as a container of all the data that you are putting in it.

var html ="‘ div ’ ‘ p ’ Often referred to as the “Pearle of the Antilles”, Haiti is also known to be the first country discovered by Columbus; /p /div ";

then push this..

This will worked without any issue. :)

[piupiupiu]

I have the same problem, but with the ViewNavigator.

I tried all workarounds suggested in this thread. No luck, unfortunately.

Here is the sample code (I use handlebars as a templates system):

http://pastebin.com/bKJ6ahn0

Please advise.

Thank you.

[triceam]

Try removing the height:100% from the .wrapper CSS class:

Change this: .wrapper {min-width:100%;height:100%}

to: .wrapper {min-width:100%;}

I'm pretty sure that's your issue.

[piupiupiu]

Thank you for the fast reply.

I removed the height, but the issue remains :( BTW, I added this css rule after as you have a similar rule in the US Census application. I did it just for test purposes after I noticed the problem