Is it possible to scroll only the iframe without affecting its parent element?

Currently, my page features a menu bar and an iframe section designed to load the items from the menu bar when clicked. I want the iframe to have scrolling capabilities while keeping the menu bar fixed at the top of the page.

However, the parent page also scrolls along with the iframe content. To address this issue, I attempted setting position: fixed for the parent page. This seemed to solve the problem initially, but the content below can now only be scrolled up to a certain point before becoming cut off (refer to the image below). How can I fix this so that both the iframe and the parent page scroll functionality work as intended?

https://i.sstatic.net/nZyW7.png

javascriptjqueryhtmlcss

Answer №1

One solution is to utilize the display: table property, although using flex could also work.

html,
body { height: 100%; margin: 0 }

.container {
  display: table;
  width: 100%;
  height: 100%;
}
.page-row {
  display: table-row;
  height: 0;
}
.page-row-expanded {
    height: 100%;
}

main iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: none;
}

.header {
  background-color: #bbb;
  padding: 10px;
}
<div class="container">
    <header class="page-row">
      <div class="header">
        Navigation bar
      </div>
    </header>
            
    <main class="page-row page-row-expanded">
        <iframe src="http://www.w3schools.com/"></iframe>
    </main>
    
</div>

Answer №2

Maybe the issue is further complicated due to

position:fixed;

You might want to check out this resource: Scroll Down iFrame - jQuery/JS

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

React - Show loading screen during AJAX request

While some questions are still loading, my component has already fully loaded. I successfully created the loading screen BEFORE the component load, but now I'm struggling with implementing it after the fact. My current approach involves making an aja ...

javascriptreactjs

most effective method for recycling dynamic content within Jquery mobile

My jQuery mobile app has a requirement to reuse the same content while keeping track of user selections each time it is displayed. I have successfully created the necessary html content and can append it to the page seamlessly. The process goes something ...

jqueryhtmljquery-mobile

developing components in Vue by extracting common logic from data functions

Within my application, there exists a menu page component. This particular component boasts multiple static data and initialized variables. As illustrated below: data() { return { tableInfo: { headers: ..., contents: ..., pagination ...

javascriptvue.jsvuejs2vue-component

The execution of 'observe' on 'MutationObserver' failed because parameter 1 is not the correct type of 'Node'. Ensure to use select2() instead

Attempting to implement select2 for dynamically loaded data via ajax, I am encountering the error mentioned above. What could be the issue? Below is the code snippet in question: $(document).on('change', '[name="country"]', fu ...

javascriptjqueryajaxjquery-select2mutation-observers

Creating a service function (constructor) in JavaScript

When working with AngularJs and calling a service method: app.service('nameService', function() { this.Service = function (){console.log('hello')} } You can then use this service (object) like so: nameService.Service() My question is, ...

javascriptangularjs

Is there a way to include a URL as a parameter in the router.get() function?

I am facing an issue with passing a URL http://localhost:3000/new/https://www.example.com as a parameter to router.get('/new/:url', function..). Instead of receiving the desired url (https://www.example.com) in req.params.url, I am encountering a ...

javascriptnode.jsexpressroutes

Tips for ensuring consistent dimensions on a bootstrap card

Currently, I am working on a project to gain a better understanding of API calls within Angular. While the functionality is running smoothly, my struggle lies in designing the HTML layout. To enhance the aesthetics, I have incorporated Bootstrap 5 into the ...

htmlcssbootstrap-5

Ignoring HTML Validation Error in Visual Studio

Within my ASP.NET HTML markup, I frequently use a custom attribute that unfortunately violates the DTD and triggers a validation error in Visual Studio. Ignoring errors is not an option for me, so I am wondering if there is a way to suppress this specific ...

asp.nethtmlvalidation

The CSS styling does not seem to be affecting the text button's appearance

I am currently creating a website using Bootstrap 5, and I'm facing an issue with making the header image responsive on mobile devices. While it looks great on desktops, laptops, and tablets, on mobile screens, the text and button alignment is off. I& ...

htmlcssresponsive-designfrontendbootstrap-5

Strategies for managing recurring identical HTML content

Within my website, I find myself repeating similar content frequently on the same page. For example: <a href="link1"><img src="path1" alt="name1"></a> <a href="link2"><img src="path2" alt="name2"></a> <a href="link3" ...

javascriptphphtmljson

Yet again faced with an annoying gap between table rows and cells, for the 532nd instance

Once again, tables have defeated me. I am struggling with a simple table: <table style="width: 200px; margin: 20px auto; border-collapse: collapse; border-spacing: 0; border: none;"> <tr style="margin: 0; padding: 0; border: none; border-colla ...

htmlcss

Tips for properly panning across the canvas

I added event listeners to capture mouse movement, clicks, and releases in my code. canvas.addEventListener('mousemove', onMouseMove, false); canvas.addEventListener('mousedown', onMouseDown,false); canvas.addEventListener('mouseu ...

javascriptcanvas

Is there a way to pass a complete image element as a prop in React?

I am receiving a JSON response with an image property for each key. This image property contains the entire image element tag with properties. I am trying to pass this down to a child component, but when I attempt to render it, it only displays as plain ...

javascriptreactjsimagereact-propsreact-image

Protractor's browser.wait function is not functioning properly when conducting tests on a non-AngularJS website

I am currently working on testing a non-angular JS website using Protractor. Even though my test case passes successfully, I am looking to eliminate the sleep statement and replace it with either a wait or Expected condition in my test case. Here is a sni ...

javascriptangularjsprotractor

Monitor the Size of the Element while Utilizing jQuery's Animation Feature

When animating the width of an HTML element using jQuery's "animate()" function, how can I dynamically keep track of the increasing width? For example, if I have an HTML element with CSS set to 'div {width: 10%;}' <div></div> &l ...

jquery

Enter key not triggering submission in jQuery UI autocomplete field

I'm currently working on implementing the autocomplete feature following a tutorial, and while it's functioning, I'm facing an issue with submitting the form when the user selects an item and hits enter. Below is the Coffeescript code that I ...

javascriptruby-on-railsjquery-uiautocompletecoffeescript

Data-api configuration for bootgrid ajax

According to the BootGrid documentation, in order to set the HTTP method to GET or enable AJAX, one must use the method and ajax attributes in JavaScript. However, the Data-API example demonstrates the use of data-url and data-ajax, leading me to conclude ...

javascriptjqueryajaxjquery-bootgrid

Manage the dimensions of elements using Javascript on the client side

Here is a form I created: <form action="#" enctype="multipart/form-data" method="post" name="..." id="formPhoto" class="fmp"> <input type="file" name="pho" id="photo" class="inph" accept="image/*"> <button type="submit" id=" ...

javascriptcontrols

Problem with Ajax functionality in a certain controller

I am facing an issue with my MVC app that has multiple controllers. This is the code snippet in my js file: jQuery.ajax( { url: "/Projects/AddTeamMember", type: "POST", data: { guidPersonId: personId }, dataType: "html", success: funct ...

asp.net-mvc-3jquery

Combining a Vuetify 2 toolbar and a navigation drawer, topped with an additional toolbar for added functionality

I am working towards achieving a layout similar to this: https://i.stack.imgur.com/M0rGl.jpg However, I currently have this setup: https://i.stack.imgur.com/VOGxJ.jpg The issue I am facing is that I am unable to position the first toolbar above the navi ...

htmlvue.jsvuetify.js