CODEWITHSUNDEEP
htmlioscssiframefullpage.js
user3615851
user3615851

Reputation: 990

Fullpage.js in iframe can't scroll on IOS mobile

I'm using Fullpage.js to create a fullpage website with sections. I am using different languges on different domains through full screen iframe.

Although I am not able to scroll the page on IOS mobile.

When using the following solution the page is not scrollabe at all: 

<iframe src="http://url.com/" style="border: 0; position:fixed; top:0; left:0; right:0; bottom:0; width:100%; height:100%">

When using this version I am able to scroll for a few moments then it goes buggy: 

<style>
.demo-iframe-holder {
  position: fixed; 
  right: 0; 
  bottom: 0; 
  left: 0;
  top: 0;
  -webkit-overflow-scrolling: touch;
  overflow-y: scroll;
}

.demo-iframe-holder iframe {
  height: 100%;
  width: 100%;
}
</style>
<body>
<div class="demo-iframe-holder">
<iframe src="http://url.com/">
</div>

Does anyone have a solution to this? Website in Iframe located here: http://tinyurl.com/j9heupj

Upvotes: 2

Views: 1063

Answers (1)

user3615851
user3615851

Reputation: 990

Solved with using the following code: 

<style>
iframe {
    overflow: scroll !important;
    width: 100%;
    height: 100%;
    border: none;
}

div {
    height: 100%;
    width: 100%;
    position: fixed;
}
body {
    margin:0;
}
@media (max-width: 780px) {
div {
    position:absolute;
}
}
</style>
<body>
<div>
    <iframe src="http://www.website.com/">
</div>
</body>

Upvotes: 1

Related Questions