Scroll iframe using buttons - iPhone

Question

I'm creating the website where content is dynamically added using iframe (files of iframes are on the same server). Loaded iframe has buttons to scroll iframe content but I can't find a reason why it doesn't work on iPhone - it works well using Android. Here is the code I used:

$('#menu li a').on('click', function(){     
            var element = $(this).attr('data-scroll');      
            $('body').animate({
                scrollTop: $('.page[data-bookmarks=' + element + ']').offset().top
            }, 1000);
        });

Btw. click event works well, because I checked it using alert. Simply scrollTop seems doesn't work on iOS devices.

@Ziggy try this link http://stackoverflow.com/questions/4599153/iframes-and-the-safari-on-the-ipad-how-can-the-user-scroll-the-content — codercat, Nov 27 '13 at 13:30
Yes, I checked it, but the problem is that I'm trying to scroll using buttons, scrolling using fingers works well. — Ziggy, Nov 27 '13 at 13:33
@Ziggy when you press the button. you want to scroll the page ah — codercat, Nov 27 '13 at 13:42
Yes, exactly. I'm not sure, maybe iOS isn't prepared for scrolling iframes using button but maybe there is a solution. — Ziggy, Nov 27 '13 at 13:48

score 0 · Answer 1 · edited Jun 20 '20 at 09:12

I found several links that might solve this issue, but the one that I ran into the most was this:

It's much easier to control overflowed divs than it is iFrames, and the scrolling + blank content issues are working all the way back to iOS 4, where previously I wasn't even able to get the 2 finger scrolling to work (in iFrames).

It goes something like this:

<iframe id="example-iframe" width="600" height="200" src="a-file.html"></iframe>

a-file.html:
<html>
<body>
<div id="wrapper" style="width: 100%; height: 100%; overflow: auto; -webkit-overflow-scrolling: touch;">
...
</div>
</body>
</html>

Scroll iframe using buttons - iPhone

1 Answers1

Other Links

Linked