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

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:

<div class="scroll-wrapper"> <iframe src=""></iframe> </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;

.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

• 
• 

  CSS Animations Between Media Queries

  CSS animations are right up there with sliced bread. CSS animations are efficient because they can be hardware accelerated, they require no JavaScript overhead, and they are composed of very little CSS code. Quite often we add CSS transforms to elements via CSS during...

Incredible Demos

• 

  Flashy FAQs Using MooTools Sliders

  I often qualify a great website by one that pay attention to detail and makes all of the "little things" seem as though much time was spent on them. Let's face it -- FAQs are as boring as they come. That is, until you...
  

Fade Images with MooTools LazyLoad

I recently received an email from a MooTools developer asking a great question about my LazyLoad class: "I'm using your LazyLoad MooTools plugin (which is great, by the way). I have been trying to figure out how to modify it so that once an image scrolls into...

Disclaimer: The information provided on DevExpress.com and affiliated web properties (including the DevExpress Support Center) is provided "as is" without warranty of any kind. Developer Express Inc disclaims all warranties, either express or implied, including the warranties of merchantability and fitness for a particular purpose. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.

Confindential Information: Developer Express Inc does not wish to receive, will not act to procure, nor will it solicit, confidential or proprietary materials and information from you through the DevExpress Support Center or its web properties. Any and all materials or information divulged during chats, email communications, online discussions, Support Center tickets, or made available to Developer Express Inc in any manner will be deemed NOT to be confidential by Developer Express Inc. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.

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.

P.S. As a workaround if anybody's interested, we created a simple preview panel addon, which shows a 'Preview in a new window' button. It always opens the tab in the same new window so you can easily go back and forth between the tabs on your mobile ;)

Looks like that:

Code (storybook ~4.0.0):

url: undefined,

const { api } = this.props;
api.onStory(this.handleStory);

const { api } = this.props;
this.setState({
  url: `${window.location.origin +
    window.location.pathname.replace('index.html', '')}iframe.html${
    api.getUrlState().url
  }`,
});

const { active } = this.props;
const { url } = this.state;
if (!active) {
  return null;
}
if (!url) {
  return 'Waiting for a story to be initialized...';
}
return (
  <div
    style={{
      width: '100%',
      padding: '15px',
      fontFamily:
        '-apple-system, ".SFNSText-Regular", "San Francisco", BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", "Lucida Grande", Arial, sans-serif',
      WebkitFontSmoothing: 'antialiased',
    }}

    <a
      href={url}
      target="storybook-preview"
      style={{
        color: '

        display: 'block',
        textAlign: 'center',
        borderRadius: '3px',
        backgroundColor: 'rgb(247, 247, 247)',
        textDecoration: 'none',
        fontSize: '16px',
        lineHeight: '3',
      }}

      Preview in new window
    </a>
  </div>
);

title: 'Preview',
render: ({ active }) => (
  <PreviewPanel active={active} channel={channel} api={api} />
),

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 do I allow iframe to scroll?

On an iFrame of type Expand to Fit content, when we set the attribute "scrolling=yes", it enables both horizontal and vertical scroll bars.