iScroll4 only showing scrolling when resizing window

Question

I stumbled upon this problem and it took my a while to realise what it was because there isn't a straight answer anywhere.

The problem was that when my page loaded, my iScrolls didn't work: The scroll bars disappeared and the sliding was broken too. It only fixed itself when I resized the window. Using refresh() didn't help, and the HTML structure seemed fine. Answer below.

score 2 · Accepted Answer · answered Jun 24 '12 at 23:54

2

The problem wasn't in my iScroll code or my HTML. It was in my CSS:

Because of the way browsers render pages, if your container has display:none; (in my case I was using dynamic classes to show/hide content), iScroll can't calculate, go nuts and dies until a resize wakes it up.

Solution: Use visibility:hidden; or opacity: 0; instead.

answered Jun 24 '12 at 23:54

Yisela

6,909
5
28
51

2

You can call the refresh method the moment you make the div visible to make iscroll work properly. You can calculate width or height in iscroll on hidden div's and it works. But the problem is with the jquery script which merely support dynamic height or width calculation on the hidden element. – user850234 Jun 25 '12 at 18:00

iScroll4 only showing scrolling when resizing window

1 Answers1