Scroll doesn't work until I change orientation of iPhone to landscape and then back again

1,619 views
Skip to first unread message

nick putman

unread,
Apr 29, 2011, 9:00:38 PM4/29/11
to isc...@googlegroups.com
Hi,

I am trying to rewrite a webpage with a jPlayer playlist on for the iPhone.  I would like the playlist to fit within the available space on the viewport, and for it to scroll.  I have installed iScroll 4 and tested it with some text and it works fine, but when I try to include the code that is the 'placeholder' for the jPlayer playlist, the scrolling doesn't happen.  Instead it looks like it is trying to scroll, but then just springs back to the top of the div.  You can see what I mean here:


When I switch the iPhone to landscape mode the scroll starts working and when I then switch back to portrait mode it keeps working.

The code I am trying to use looks like this:

<div id="wrapper">
<div id="scroller">
<div id="jp_playlist_1" class="jp-playlist">
<ul>
<!-- The method Playlist.displayPlaylist() uses this unordered list -->
<li></li>
</ul>
</div>
</div>
</div>
<script type="text/javascript">
var myScroll = new iScroll('wrapper');
</script>

Does anyone have any suggestions as to why the scroll isn't working from the start?

Thanks,

Nick

simone.r...@gmail.com

unread,
Apr 30, 2011, 3:36:02 AM4/30/11
to isc...@googlegroups.com
Same problem here.

Same page, sometime work... some time won't scroll (just bounce in the middle of the page)

nick putman

unread,
May 2, 2011, 12:00:10 PM5/2/11
to isc...@googlegroups.com
Is anyone else experiencing this issue? Presumably it is related to what is actually in the scrolling DIV, in my case the HTML for a jPlayer playlist.

If it's not possible to use iScroll with this HTML can anyone recommend other scrolling scripts for iOS? or alternatively a way of fixing a DIV at the top of the page so that it doesn't scroll, and just using the normal scrolling of a webpage for the rest of the content?

Thanks,

Nick

and...@cidesigninc.com

unread,
May 2, 2011, 6:12:34 PM5/2/11
to isc...@googlegroups.com
Same issue here. Using jqtouch. Just bounces until I rotate, then works in either orientation. As a hacky workaround, is there anything that can be triggered to simulate orientation change, without changing orientation. This seems like an initialization issue.

Matteo Spinelli

unread,
May 3, 2011, 2:05:24 AM5/3/11
to isc...@googlegroups.com
try to initialize (or refresh) the iscroll 100/200ms after the window load event.

Matteo

Simone Rodriguez

unread,
May 3, 2011, 2:59:07 AM5/3/11
to iScroll
Right!

I solved with the suggested script

var myScroll;
function loaded() {
setTimeout(function () {
myScroll = new iScroll('wrapbody');
}, 100);
}
window.addEventListener('load', loaded, false);

Nick Putman

unread,
May 3, 2011, 6:13:39 AM5/3/11
to isc...@googlegroups.com
thanks. that works for me too, but with a flash of white on the page after it has loaded, presumably because of iScroll being initialised. Is there a way to achieve the same result without this flash? Is this a bug that can be sorted by the developer?

Nick

Matteo Spinelli

unread,
May 3, 2011, 6:15:43 AM5/3/11
to isc...@googlegroups.com
try to add: -webkit-transform:translate3d(0,0,0)
to the scroller in your CSS.

Matteo

nickha...@mac.com

unread,
May 3, 2011, 9:07:27 AM5/3/11
to isc...@googlegroups.com
Thanks. The CSS hasn't made any difference. Perhaps I haven't added it to the right DIV?

My scrollable content is between two DIVs, 'wrapper' and then 'scroller'. It's the 'wrapper' DIV that myscroll is linked to, and it's this DIV that I added the CSS to.

What's the CSS designed to do?

Nick

Andrew Glaser

unread,
May 3, 2011, 11:33:51 AM5/3/11
to isc...@googlegroups.com
This didn't help my issue. Seems like the orientation change is a window event hence iscroll working after, but page changes with jqtouch are just css animations and js. When using jqtouch is there some other event to listen for?

Greatarjun

unread,
Feb 7, 2012, 7:43:48 AM2/7/12
to isc...@googlegroups.com
Hi stil i have this problem , iam using Jquery mobile please  help me...

Rahul Joshi

unread,
Jan 24, 2016, 3:20:05 AM1/24/16
to iScroll
Why iScroll works only after rotating to landscape and back to portrait

 I am developing a mobile web app using AngularJs and i m using Iscroll (http://cubiq.org/iscroll-5) having a issue is that when I test on actual mobile device iPhone 5s and android  only Scrollbar starts after orientation was change, with out orientation change it will behave like rubber band.

Your immediate response is highly appreciated!

I am using:

function loaded () {
 
myScroll = new IScroll('#wrapper', {
scrollbars: true,
checkDOMChanges: false,
mouseWheel: true,
interactiveScrollbars: true,
shrinkScrollbars: 'scale',
fadeScrollbars: true
})

setTimeout(function(){
                        myScroll.refresh();
                        console.log('myScroll')
                    }, 2000);
 
}

Please help!
Reply all
Reply to author
Forward
0 new messages