Remove the scrollbar from the iframe and instead display a scrollbar on the page in its place

Currently, I am facing an issue with the vertical scrollbar on an iframe. I want to remove it so that the scrollbar appears on the main page instead. This way, I will be able to scroll the content of the iframe using the page's scrollbar. I managed to hide the vertical scrollbar from the iframe, but now I cannot see it at all. Here is the code snippet I used:

iframe::-webkit-scrollbar {  
    display: none;
  }

Although this solution works on Google Chrome, it does not work on Firefox and Internet Explorer. I have tried various alternatives such as:

iframe::-moz-scrollbar {display:none;}
iframe::-o-scrollbar {display:none;}
iframe::-google-ms-scrollbar {display:none;}
iframe::-khtml-scrollbar {display:none;}

Unfortunately, none of them have been successful.

I am seeking assistance in hiding the scrollbar from the iframe across all browsers and ensuring that I can still scroll the iframe's content using the page's scrollbar. Thank you for your help.

javascriptjquerycssiframescrollbar

Answer №1

In certain instances, the scrollbar may be hidden in Internet Explorer by using iframe {overflow: hidden;}. However, inserting scrolling="no" into your iframe typically resolves this issue across all browsers.

Answer №2

To dynamically adjust the height of an IFRAME within its parent page, you can incorporate JavaScript code that runs on load and resize events. It is important for the page containing the IFRAME to be under the same domain as the parent, although certain browser security settings might allow exceptions.

Here is an example using 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();
    });

Make sure to assign a unique name to the iframe element in the parent page:

<iframe name="unique-name" ...></iframe>

Answer №3

It appears to be working well:

HTML 5/CSS

.ifm {
    width: 1200px;
    height:800px;
    overflow-y: hidden;
}
<iframe src="https://bing.com" 
    class="ifm" 
    scrolling="no" 
    seamless="seamless">
</iframe>

Referenced from this post.

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

Navigating and exploring data stored in a mongoose database

Currently, I am attempting to filter data based on a specific id (bWYqm6-Oo) and dates between 2019-09-19 and 2019-09-22. The desired result should return the first three items from the database. However, my current query is returning an empty array. I wou ...

javascriptexpressmongoose

What is the syntax for implementing this function in TypeScript?

When developing applications in react and typescript, I find myself frequently creating helper functions. However, there are two key points that always give me pause. One of my functions is provided below, showcasing the common dilemmas I face. What shoul ...

javascripttypescriptfunctional-programmingtypechecking

Discovering methods to access properties from another function

Can I access the value of variable w from another function? <script type="text/javascript"> var first = { myFirst: function(){ var w= 90; var q=12; }} var second= { mySecond: function(){ first.myFirst.w }} </script> ...

javascriptjquery

What is the best way to eliminate a vertical line from an HTML table?

I am looking to remove specific vertical lines from an HTML table. There are only 3 vertical lines in total, and I want to remove the first and third lines. Below is my code: <html> <head> <style type="text/css"> .table1{ background: ...

htmlcss

I'm currently working on storing my data in a Node.js REST API, but I keep encountering an issue with the error message "req.status is not a function"

router.post('/savedata',function(req, res){ console.log(req.body); var data={ firstname:req.body.firstname, lastname:req.body.firstname, password:req.body.password, email:req.body.email, created:req ...

javascriptnode.js

Creating a JSON file that contains a collection of discord.js statuses and then seamlessly integrating it into the primary JavaScript document

const userActivities = [ { name: "Morning Jog", type: ActivityType.Running }, { name: "Afternoon Nap", type: ActivityType.Sleeping }, { name: "Evening Game Night", type: ActivityType.Gaming }, { name: "Late Night Code ...

javascriptnode.jsdiscorddiscord.jsnode-modules

The ajax success response transforms when using @html.raw

In my Razor viewpage, I have the following jQuery code: $(document).ready(function () { var listValues = @Html.Raw(Json.Encode(Session["list"])); $("#nsline").click(function () { alert(listValues) $.ajax({ type: "P ...

javascriptjqueryjsonajaxjsonresult

Performing subtraction operation on a selected floating-point value from a database using PHP

I am facing an issue with my code where I need to subtract a float value selected from the database and update the subtracted values in the database table. Below is my code snippet: $AmountGiven = $_POST['AmountGiven']; $conn = mysqli_connect("l ...

javascriptphpjquery

Issue with Bootstrap 4 navbar dropdown on mobile: unable to click on menu item

My website is currently in development with Bootstrap 4. I'm facing an issue where, on mobile devices, when the menu items collapse into the three bars, they are not clickable. Despite following the recommendations in the Bootstrap documentation, the ...

jquerycsstwitter-bootstraptwitter-bootstrap-4bootstrap-4

JavaScript (jQuery) module that fetches libraries

Many of you may be familiar with Google's API, which allows you to load specific modules and libraries by calling a function. The code snippet below demonstrates how this can be done: <script type="text/javascript" src="//www.google.com/jsapi"> ...

javascriptjqueryajaxapisinemacula

What causes the appearance of 'GET/ 304 --' in my code? (vue.js, express)

While attempting to fetch data on the client-side using axios in vue.js, I encountered a server-side error with the code 'GET/ 304 --' The reason for this occurrence is unclear to me and I am unsure of how to troubleshoot or resolve it. If I re ...

javascriptnode.jsexpressvue.js

Is the row removed from the table after successful deletion?

I am struggling to remove the deleted row from the table. The code I tried is not working as expected. Here is the scenario: When a user clicks on the delete link/button, it sends a delete request and removes the data from the Database. After successful de ...

javascriptjqueryajaxknockout.js

Mapbox struggling with performance because of an abundance of markers

I have successfully implemented a feature where interactive markers are added to the map and respond to clicks. However, I have noticed that the performance of the map is sluggish when dragging, resulting in a low frame rate. My setup involves using NextJ ...

javascriptreactjsnext.jsmapsmapbox

Require assistance with handling Ajax when a function with an Ajax call is repeatedly invoked

I am seeking guidance with ajax as I am still new to it. A problem arises when the same ajax call is made multiple times before the previous one completes its execution, resulting in an empty pop-up on the user interface. How can this issue be resolved? Es ...

javascriptjqueryajax

Is the memory efficiency of Object.keys().forEach() in JavaScript lower compared to a basic for...in loop?

Picture a scenario where you have an extremely large JS object filled with millions of key/value pairs, and your task is to loop through each of them. Check out this jsPerf example that demonstrates the different techniques for accomplishing this, highlig ...

javascriptloopsobjectecmascript-5

I seem to be facing some difficulty in dynamically calling my buttons in AngularJS

Can you assist me in solving this problem? I am new to Angular and just starting out. Initially, there is only one button on load called "Add list". When the user clicks on this button, they are able to add multiple lists. Each list contains a button labe ...

javascriptjqueryangularjs

What is the method to alter the fill of a circle using CSS when it is hovered over in JavaFX?

I am seeking assistance for a task involving a circle within an hBox. I would like the color of the circle to change when the mouse cursor hovers over it. Is there a way to accomplish this using JavaFX and CSS? If not, what is the recommended approach fo ...

javacssjavafxjavafx-8

Exploring an Array in Javascript derived from a PHP Array

I have a PHP variable named $TillArray that contains an array. I am trying to pass this array to a Javascript function in order to display an Alert message for each item within the array. Below is the code I have been using: <script type="text/javasc ...

phpjavascriptarraysalert

Inspect Element - base tag href URL for inline CSS allocation

When utilizing the <base> tag in HTML along with the <style> tag on Microsoft's Edge Browser, I encounter a peculiar issue. Here is a very basic example: <!DOCTYPE html> <html lang="en"> <head> <title>Edge de ...

htmlcssmicrosoft-edgedeveloper-tools

Looking for a way to store data in a sub-document in MongoDB? I am having an issue where my farm sub-documents

After many attempts, I am still facing issues while saving farm data for a User. I created an API to sign up a user and save their data, including the farm object. However, every time I try to update the code, the farm object turns into null. The goal is t ...

javascriptnode.jsmongodbexpressmongoose