Scroll to top not working inside iframe in ios năm 2024

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

I'm having trouble getting iFrames to work properly on iOS. Everything works on desktop and Android, however on iOS (Safari or Chrome iOS), the contents inside the iFrames are not scrollable. Not only that, but I was struggling with changing the size of the iFrame with CSS. I originally was just going to create my own navbar without the use of iFrames, but I decided to take the challenge and figure this out.

After a couple of weeks, I finally found a fix for this. I tried a ton of different things, some worked but made the scrolling super buggy. This is the best solution I have found. The biggest problem with this so far is that you get double scrollbars on your page. However, scrolling works very fluidly.

On your navbar page, insert height=200 and scrolling=no on each iframe tag.

Then, on the iFrame page itself (the src of the iframe) insert this in the Header:

Hope this helps someone else in the future. Cheers.

For the longest time, developers were frustrated by elements with overflow not being scrollable within the page of iOS Safari. For my blog it was particularly frustrating because I display my demos in sandboxed IFRAMEs on top of the article itself, so as to not affect my site's AJAX pageload strategy. Some research revealed that there are only two CSS properties to set and one element to set them on. Here we go!

The HTML

In the case of an IFRAME and all other HTML elements, you'll want a wrapping element like a DIV:

This DIV will serve as the base container for what's scrollable inside.

The CSS

One familiar property and one lesser-known property will be used to allow scrolling for the IFRAME:

.scroll-wrapper { -webkit-overflow-scrolling: touch;

overflow-y: scroll;

/ important: dimensions or positioning here! / } .scroll-wrapper iframe { / nada! / } The -webkit-overflow-scrolling: touch; property and value were created especially for the case of overflow scrolling within the browser. Without this the page will scroll when you scroll the IFRAME area; with it you get control of the IFRAME! For my site's case, I use the following:

.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%; } Keep this tip handy and remember the special CSS goes on the wrapper and not the scrollable element itself!

Recent Features

• Responsive Images: The Ultimate Guide

  Chances are that any Web designers using our Ghostlab browser testing app, which allows seamless testing across all devices simultaneously, will have worked with responsive design in some shape or form. And as today's websites and devices become ever more varied, a plethora of responsive images...

Incredible Demos

MooTools 1.2 Image Protector: dwProtector

Image protection is a hot topic on the net these days, and why shouldn't it be? If you spent two hours designing an awesome graphic, would you want it ripped of in matter of seconds? Hell no! That's why I've created an image...

Why my scroll top is not working?

If your CSS html element has the following overflow markup, scrollTop will not function. To allow scrollTop to scroll, modify your markup remove overflow markup from the html element and append to a body element.

How to detect scroll to bottom in an iframe?

scroll(function () { if ($(window). scrollTop() == $(document). height() - $(window). height()) alert('Bottom reached'); });

How do I forbid an iframe from scrolling its parent window?

If you don't need to interact with the iframe, the quick and dirty solution is to use pointer-events: none; . This will put the iframe on the page, and not allow it to scroll.