Remove Scroll bar from Iframe tag

Viewed 33

I want to use an iframe on a website and use this code:

<iframe src="https://dispatchcenter.com/widgets/tall/" width="100%" height="auto" marginheight="0" frameborder="0" border="0" scrolling="no"></iframe>

But the scrolling bar still shows. If I made anything wrong? Can anyone help me to remove the scroll bar? enter image description here

2 Answers

First give class to i frame and try this in css,

For Chrome, Safari and Opera:

.example::-webkit-scrollbar {
  display: none;
}

For IE and Edge:

.example {
  -ms-overflow-style: none;
}

For Firefox:

.example {
  scrollbar-width: none;
}

It seems you cannot.

Tested in Chrome and FX.

Chrome hides the body one, but not the iFrame one

body {
  background-color: teal;
}

iframe {
  height: 2000px;
}

.hidescrollbar {
  -ms-overflow-style: none;
  /* Internet Explorer 10+ */
  scrollbar-width: none;
  /* Firefox */
}

.hidescrollbar::-webkit-scrollbar {
  display: none;
  /* Safari, Chrome Edge */
}
<body class="hidescrollbar"><!-- does not help in firefox in the fiddle -->
  <iframe class="hidescrollbar" src="javascript:'<body class=hidescrollbar><div style=height:2500px>Hello</div></body>'"></iframe>
</body>

If the page is from the same server or a server with CORS enabled, use a div instead and insert using AJAX or via the server

Related