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.
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>
Other Links
-webkit-overflow-scrolling: touch does not "obey" z-index
iFrame scrolling doesn't work on an iPhone
iFrame scrolling on an iOS device
dropdown-menu problems with -webkit-overflow-scrolling:touch on the iPad
Related
I have to work on a project and I am facing a problem of not removing the scroll from the iframe. actually, I am trying to pass several pages in a single iframe. So the iframe height is not set according to the content.
I tried a lot of javascript code but none of them works.
<iframe src = "" scrolling = "no"></iframe>
<style>
iframe{
overflow: hidden;
}
</style>
Try this, it should disable the scrolling in iframes
Hello, I'm currently stuck on an issue that only happens on IOS. I have a dropdown menu that only shows on mobile & tablet mode. When the burger icon is clicked, it fixes the html & body, this works on all devices, except IOS, I tested this on an iPhone 5C.
Below I have listed the code that I have used stop the background scrolling. Once the burger icon is clicked it toggles the class noScroll. The class noScroll consists of overflow:hidden; which is then applied to the html & body.
I have absolutely no idea why this is not working with IOS, maybe because of the bounce scrolling? I am unsure.
The website that I am working on is Redec
jQuery(function($) {
$(".x-btn-navbar").on("click", function() {
$("html, body").toggleClass("noScroll");
});
});
.noScroll {
overflow: hidden;
/* position: fixed */
}
sorry for posting this as a solution but I don't have enough reputation to comment yet, I think you can find the solution here => Does overflow:hidden applied to <body> work on iPhone Safari?
Safari on iOS 10.1.1 seems to have a bug when setting focus on an element inside an iframe.
When we call element.focus() on an element inside an iframe, Safari will immediately scroll the parent page down and move the focussed element off-screen (instead of scrolling the focussed element into view).
However, it only happens if the element is in an iframe that is taller than the device screen height (shorter iframes are OK).
So if there are two elements, one at the top of the iframe and another one further down the page, the first will focus fine but the second one will jump off-screen when we set focus.
To me it looks like Safari is trying to scroll the element into view but the maths is wrong and they end up scrolling to a random position further down the page. Everything works OK in iOS9 so I think this is a new bug in iOS10.
Is some way of preventing the parent page from scrolling or some other way of avoiding this bug?
I've put together a one-page gist that replicates the issue on iOS 10 devices or the Simulator.
Here is a a URL you can actually use on a phone: goo.gl/QYi7OE
Here's a plunker so you can check desktop behaviour: https://embed.plnkr.co/d61KtGlzbVtVYdZ4AMqb/
And a gist version of that plunker: https://gist.github.com/Coridyn/86b0c335a3e5bf72e88589953566b358
Here's a runnable version of the gist (the shortened URL above points here):
https://rawgit.com/Coridyn/86b0c335a3e5bf72e88589953566b358/raw/62a792bfec69b2c8fb02b3e99ff712abda8efecf/ios-iframe-bug.html
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<script>
document.addEventListener('DOMContentLoaded', function(){
document.querySelector('#frame').srcdoc = document.querySelector('#frameContent').innerHTML;
});
</script>
</head>
<body>
<iframe id="frame" frameborder="1"
style="width: 100%; height: 1200px;"
width="100%" height="1200">
</iframe>
<!--
To keep this a one-page example, the content below will be inserted into the iframe using the `srcdoc` attribute.
The problem occurs in iOS10 regardless of using `srcdoc` or `src` (and regardless of same-domain or cross-domain content).
-->
<script id="frameContent" type="text/template">
<div>
<style>
.spacer {
padding-top: 400px;
padding-bottom: 400px;
}
.green-block {
width: 20px;
height: 20px;
background-color: green;
}
.red-block {
width: 20px;
height: 20px;
background-color: red;
}
</style>
<div class="green-block" tabindex="0"></div>
<p>Scroll down and press the 'Focus Green' or 'Focus Red' button.</p>
<h2>'Focus Green'</h2>
<p><b>Expected:</b> should set focus on '.green-block' and scroll to the top of the page.</p>
<p><b>Actual:</b> sets focus but does not scroll page.</p>
<h2>'Focus Red'</h2>
<p><b>Expected:</b> should set focus on '.red-block' and not scroll page (because element is already on-screen).</p>
<p><b>Actual:</b> sets focus and scrolls down to the bottom of the host page.</p>
<hr/>
<p class="spacer">1 Filler content to force some visible scrolling 1</p>
<div class="red-block" tabindex="0"></div>
<div>
<button type="button" onclick="document.querySelector('.green-block').focus();">Focus Green</button>
<p>'Focus Green' should go to top of page, but on iOS10 the view doesn't move.</p>
</div>
<div>
<button type="button" onclick="document.querySelector('.red-block').focus();">Focus Red</button>
<p>'Focus Red' should stay here, but on iOS10 the view scrolls to the bottom of the page</p>
</div>
<p class="spacer">20 Filler content to force some visible scrolling 20</p>
<p>Bottom of iframe</p>
</div>
</script>
</body>
</html>
Things we've found:
The issue happens on iOS 10+ in both Safari and Chrome
The issue does not happen on Safari iOS 9.3.2 (behaviour matches desktop browser, as expected)
The problem only happens when focussing on non-input HTML elements e.g. DIVs, SPANs, anchor tags, etc; setting focus on INPUT elements works correctly
Desktop Safari works fine
It's the parent page that is scrolling, not the iframe (the iframe is sized to 100% of its content to avoid scrolling inside the frame)
We've tried calling preventDefault on the parent page with: window.onscroll = (event) => event.preventDefault(); but this doesn't work because the scroll event is not cancelable
The scroll event raised on the parent page seems to come from Safari/Webkit itself because there are no other functions in the callstack (when inspecting with DevTools and Error.stack)
I had a similar issue with scroll jumping around on iOS. It was happening on all iOS versions for me, 8, 9 and 10.
Testing your plunker in a real iOS 10 device didn't cause the problem for me. I am not sure if I tested correctly.
Can you try this version of your plunker on iOS? https://embed.plnkr.co/NuTgqW/
My workaround for my issue was to make sure the body and html tag in the iframe content had a defined 100% height and width, and an overflow scroll. This was able to force the iframe's dimension. It prevented the scroll jumping.
Let me know if it helps.
In my situation a page contained an iframe with an input. On page load the input got focus. This caused the parent page to be scrolled to the position of the input. It happened in all browsers.
Solution: when the page started to scroll, set the scroll position back to the top.
Because the issue happened only once, I used a namespaced event to remove a listener as soon as the undesired scroll has been prevented.
$(function() {
if ($('#iframe').length) {
var namespace = 'myNamespace';
$(window).on('scroll.' + namespace, function() {
$(window).scrollTop(0).off('scroll.' + namespace);
});
}
});
I have iframe with vertical scrollbar. I need to remove it and have this scollbar at the the page. So, when I need to scroll the content of the iframe, I can use the page scrollbar.
I did hide the the vertical scrollbar from the iframe but now, I don't have it at all.
I use:
iframe::-webkit-scrollbar {
display: none;
}
And this works only with google chrome but it doesn't work with firefox and Internet Explorer. I tried all the following:
iframe::-moz-scrollbar {display:none;}
iframe::-o-scrollbar {display:none;}
iframe::-google-ms-scrollbar {display:none;}
iframe::-khtml-scrollbar {display:none;}
But they didn't work.
So, I need your help to hide the scrollbar from iframe with all browsers.
And have the ability to scroll the iframe's content from the scrollbar of the page.
Thank you
Depending on the version of IE, sometimes using iframe {overflow: hidden;} will hide the scrollbar. But putting scrolling="no" in your iframe usually works on all browsers.
You can add JavaScript to the page within the IFRAME to, on load and on resize, set the height of the IFRAME within the parent. The page will need to exist within the same domain as the parent, although you may be able to overcome this with browser security settings.
Within the page (example uses jQuery):
if (window != window.parent)
$(function() {
var resize = function() { $(window.parent.document).find("IFRAME[name='" + window.name + "']").height($(document).height()); };
$(window.parent).resize(resize);
resize();
});
You will need to give the iframe a name on the parent page:
<iframe name="anything" ...></iframe>
This seems to work just fine:
Html 5/CSS
.ifm {
width: 1200px;
height:800px;
overflow-y: hidden;
}
<iframe src="https://bing.com"
class="ifm"
scrolling="no"
seamless="seamless">
</iframe>
Based on this post.
This is my website: http://www.ragewarsclan.com
I was having trouble integrating a Forum into my website.
I used object at first then realised that this wouldn't be the best solution, so I switched to iframe and used this code:
<div style="margin: 0 auto; width:100%; height:100%;
overflow: auto;"><iframe src="./smf/" width="100%" height="100%"></iframe></div>
This only seemed to work for chrome as in other browsers the height of the forum would only be something like 250px so I changed from having 100% to 1750px.
However, now, when the user clicks on one of the forum categories, it puts the user near the bottom of the page so I used jquery and used this to try and force the user to the top of the page when a forum category has been clicked:
<script type="text/javascript" src="jQuery-1.4.1-min.js">
$(document).ready(function(){
$(this).scrollTop(0);
});
</script>
Although this hasn't seemed to have worked and I'm not sure why...
Thanks.
you can make your forum categories links and set their href to an element at the top of the page
http://jsfiddle.net/sTr8F/
<div id="top"> top of page. scroll down to find link and click on it </div>
forum category
scrollTop doesn't scroll to the top, it returns the y-offset of the page.
If you need to scroll the page to the top using jQuery (so you can do it also smoothly) you can use animate
$("html, body").animate({scrollTop:0},500); //will be done in 500ms