Skip to main content

How to scroll on top of iframe on mobile

On my current project we had requirement to provide mechanism for include foreign content in web page (it can be page from same domain or page from foreign domain) for mobile devices. We already had solution for desktop browser and only we should to port it for mobile. For this purpose for the desktop browser we used iframes and we wanted to do same for mobile. Here stuff have become a little bit tricky.

During developing web page for mobile device we noticed a problem with using of iframe. The complete content of iframe is loaded into page and there is no possibility to use scrolling functionality of iframe. 
Loading of iframe into current page we did not see as a problem, actually we wanted that behavior but we still had a problem with scrolling. We wanted to scroll to the top of iframe in case of activating link inside of frame.
To resolve this problem, we have created a javascript function for scrolling page content to the top of iframe in the case when the top of iframe is not visible on the screen. There is simple javascript function which we used:

function scrollIFrame(iframe) {
var windowY = window.pageYOffset;
var frameY = iframe.offsetTop;
if (windowY > frameY) {
// Scroll to top of frame
window.scrollTo(0, frameY);

And we called this function on load event of iframe.

Popular posts from this blog

Checking file's "magic numbers"

Few days ago I had very interesting task. Our customer required that we perform checking of so called file's "magic numbers" to determinate does uploaded file correspond to it's extension. 
We are already allowed only to upload files with some predefined extensions (PDF, DOC ...). But this can not prevent some evil user to update an exe file after renaming it to PDF or DOC.
So first of all I will explain what are "magic numbers", and then I will show how we handle them.

Simple Workflow Engine With Spring

Few months ago, during working on one of the company project, we had need to developed  REST services which is used for sending an email depending on data sent by client application. During developing this service we decide to create simple workflow engine which will be charged for sending an email, but also this engine can be used for any kind of simple flows. In this article i will explain step by step how you can implement your simple workflow engine which can handle sequence flow.

Configure Seam Mail

From time to time we have need to send an e-mail from application. This task should not be so complicated, but if you do it for the first time you can get some troubles and it can take you some time. Because of that I will try to explain how you can configure it correctly.