Unable to move up and down in my iframe

I am currently working on an Instagram page that is visible through an iframe. Everything seems to be functioning fine on my iMac, but I am facing an issue with scrolling on my iPhone and iPad?

After reviewing my code, I couldn't find any hidden overflow. Here is a snippet of the CSS code I am using:


body { 
  overflow: scroll!important; 
  -webkit-overflow-scrolling: touch!important; 
}

.rightpart { 
  background:#fff; 
  padding-top: 0px!important; 
  padding-bottom: 0px!important; 
  overflow-x: hidden !important; 
  overflow-y: scroll !important; 
  -webkit-overflow-scrolling:touch !important; 
  height:600px; 
}

In addition, here is a snippet of the HTML code where I embed the iframe for the Instagram page:


<div class="leftpart"></div>  

<div class="rightpart">
  <iframe style="border:0px; min-width: 100%; overflow: hidden; min-height:800px;" src=".../"></iframe>    
</div>

<script type="text/javascript" src="index/js/functions.js"></script>
htmlcssiframescrolloverflow

Answer №1

Consider including

scrolling="yes"

within your iFrame element.

Answer №2

One potential solution is to add overflow: scroll; to the iframe element in your CSS.

iframe {
     overflow: scroll;
}

Answer №3

My suggestion is to utilize the following code:

iframe {
     overflow: auto;
}

By implementing this code, the iframe will display the scroll bar only when necessary.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the method for implementing right/left text ellipses on flexed buttons that span the entire viewport width using CSS?

I currently have the following code: .viewport { width: 300px; } .container { --color-dark: rgb(40, 40, 40); --color-light: rgb(255, 255, 255); --color-base-background: rgb(255, 255, 255); ... <div class="viewport"> <di ...

css

Styled Components do not have the ability to define :hover states

export const WatchVideoButtonWrapper = styled.div` position: absolute; bottom: 80px; right: 33px; background-color: ${(props) => props.bgColor}; color: ${(props) => props.color}; border-radius: 100px; transition: all 0.1s; ...

javascriptcssreactjsanimationstyled-components

fill the designated column in accordance with the specific criteria

Is there a method to automatically fill in a specific column based on certain conditions? I am looking to populate the column labeled [Last] when the column index is 1 and the corresponding name is [First]. import {Component, OnInit} from '@angular ...

htmlangulartypescript

How to Achieve an Overlapping Background Image Effect with Divs Using HTML and CSS

Is it possible to achieve the following scenario using just HTML and CSS? I want to display the background image of my HTML body through a clipped div. Keep in mind that the final website needs to be responsive (mobile-first), so any solution should accom ...

htmlcss

Tips for positioning a div relative to another div while controlling its z-index

Hey there, take a look at the image below https://i.sstatic.net/zYiaY.png The issue I'm facing is quite common - I have div 1 and div 2 visible in a loop, but divs 3 are hidden. When div 2 is clicked on, everything is great so far. However, what I wa ...

javascriptjquerycsshtml

AngularJS: Utilizing UI Bootstrap Popover with the Placement Set to 'bottom-right'

I am working with UI Bootstrap and AngularJS, attempting to customize a popover to have the 'bottom-right' placement instead of the default 'bottom' or 'right'. The desired functionality is illustrated in the image below. htt ...

javascriptcssangularjstwitter-bootstrapangular-ui-bootstrap

The functionality of List.js is currently not optimized for use with tables

I'm currently experimenting with list.js in order to create a real-time search feature for a table. I have successfully tested it on lists (similar to the example provided at ). However, I am facing difficulty replicating this functionality for tables ...

javascripthtmlsearchlistjs

Can anyone provide assistance with understanding the background-size property?

I am struggling to resize the background image on my website, similar to the one on this website. No matter what I try with the position or background-size property, the image remains too large and does not adjust properly. Additionally, I need the image t ...

htmlcssbackground

Is there a CSS3-compatible CSS parser available in C/C++?

Are there any C/C++ CSS parsers that currently support CSS3? I have come across a few, but none of them seem to offer full CSS3 compatibility. ...

c++cparsingcss

The issue with Open Sans and sans-serif fonts not rendering properly in all web browsers

I am having trouble with websites that use the Open Sans font appearing with a strange handwriting style. I'm not sure where this issue is originating from. Here are some things I have tried: Using In-Private browsing Disabling all extensions Testin ...

htmlgoogle-chromefontsmicrosoft-edge

What is causing my div to transition repeatedly from the bottom to the top instead of the center position?

Currently, I am using React and Tailwind CSS and facing an issue with the transition property. My goal is to have a div grow in width and height from the center until it covers the entire viewport when a specific state variable becomes true. The content in ...

cssreactjstailwind-csstransition

Trigger the select dropdown when a key is clicked

I am currently working on a project in react where I am utilizing the Select component from material. When I open the dropdown and press a key on my keyboard, the option starting with that key gets automatically selected. This behavior is also observed in ...

javascripthtmlreactjsmaterial-ui

What techniques can I implement to optimize the speed of this feature in JavaScript?

I have developed a feature that highlights any text within a <p> tag in red based on a user-specified keyword. The current implementation works well, but it is slow when dealing with over 1000 lines of <p>. Is there a faster way to achieve this ...

javascriptjqueryhtml

Is it necessary to have height:0 and width:0 when display:none is already applied?

Is it necessary to include height:0 and width:0 when applying display:none to a class? I've noticed these properties being used in certain instances, could they potentially resolve any issues with compatibility in older browsers? ...

css

Incorporating React's dynamic DIV layout algorithm to generate a nested box view design

My goal is to showcase a data model representation on a webpage, depicting objects, attributes, and child objects in a parent-child hierarchy. I had the idea of developing a versatile React component that can store a single data object while also allowing ...

javascriptcssreactjshtmluser-interface

Graphic selectors: a new take on radio buttons

I've been attempting to make this work, but it's not functioning correctly. Below is the CSS code: .input_hidden { position: absolute; left: -9999px; } .selected { background-color: #000000; } #carte label { display: inline-bl ...

javascripthtmljquerycssradio-button

Displaying postcode on a category page: A step-by-step guide

I would like to showcase the user input code and present it on the web exactly as entered. <?php #code... ?> Any assistance is greatly appreciated. Please excuse my English. Thank you! ...

javascriptphphtmlcss

Is it possible to activate numerous hover effects on links by hovering over a div?

How can I trigger multiple hover effects simultaneously when hovering over my main div? I'm struggling to figure out how to make the line animate on all three links at the same time. Is it possible to achieve this using only CSS or do I need to use Ja ...

htmlcsshover

Unraveling a Java String with HTML elements into a JsonObject: Step-by-step Guide

Hey there, I have a Java String that was received from an HTTP request and it looks like this: {SubRefNumber:"3243 ",QBType:"-----",Question:"<p><img title="format.jpg" src="data:image/jpeg;base64,/9j/4AAQSkZJRgAB..."></img></p>"} ...

javahtmljson

Is there a way to pass an HTMLDivElement as a child in React components?

Scenario Currently, I am in the process of developing a React application (rails-react) where the main component is called GameTracker. Within this parent component, there are two child components: EquipmentPanel and PinnedPanels. To achieve a specific fu ...

htmlreactjsruby-on-railsreact-rails