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.
1 comment
Read more

Clean code with aspects

In my previous post I've described the alphabet conversion, and I've mentioned that we used AspectJ to resolve that task, but i did not mention how AspectJ works and what are aspects generaly. So in the next few lines i will explain: what is Aspect Oriented Programming and why we need it what is AspectJ using AspectJ with Spring (configuring AspectJ and spring to work together) and i will explain aspects on the example from previous post.
Post a Comment
Read more