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.
Labels:

Comments

Post a Comment

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.
Post a Comment
Read more

Running Spring Boot Web App on the Random Port from Port Range

By default the spring boot web application is listening on the port 8080 for the incoming connection. This behavior can be changed by providing server.port property value during starting of the application or as part of the application.properties or through the code by implementing EmbeddedServletContainerCustomizer. But it would be even better if we could specified a range of the ports which can be used for the starting the application. It would be great if I could specify a property like server.portRange=8100..8200 to define a list of the port on which I want to start my service. In this blog post I will describe how this can be done.
Post a Comment
Read more

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.
Post a Comment
Read more