Удалить полосу прокрутки из iframe

Question

Используя этот код

<iframe frameborder="0" style="height: 185px; overflow:scroll; width: 100%" src="http://www.cbox.ws/box/?boxid=439&boxtag=7868&sec=main" marginheight="1" marginwidth="1" name="cboxmain" id="cboxmain" seamless="seamless" scrolling="no" frameborder="0" allowtransparency="true"></iframe>

Вот как это выглядит (чат на домашней странице http://www.talkjesus.com/)

Как удалить горизонтальную полосу прокрутки и изменить CSS вертикальной полосы прокрутки?

Спасибо.

Answer 1

В вашем css:

iframe{
    overflow:hidden;
}

Answer 2

Добавлять scrolling="no" приписать к фрейму.

Answer 3

Это работает во всех браузерах. jsfiddle здесь http://jsfiddle.net/zvhysct7/1/

<iframe src="http://buythecity.com"  scrolling="no" style=" width: 550px; height: 500px;  overflow: hidden;" ></iframe>

Answer 4

Добавление scroll="no" а также style="overflow:hidden" на iframe не сработало, пришлось добавить style="overflow:hidden" в теле HTML-документа, загруженного внутри iframe.

Answer 5

Просто добавь scrolling="no" а также seamless="seamless" атрибуты тега iframe. как это:-

 1. XHTML => scrolling="no"
 2. HTML5 => seamless="seamless"

Answer 6

Попробуйте добавить scrolling="no" атрибут, как показано ниже:

         <iframe frameborder="0" scrolling="no" style="height:380px;width:6000px;border:none;" src='https://yoururl'></iframe>

Answer 7

Если у кого-то здесь есть проблема с отключением полос прокрутки на iframe, это может быть связано с тем, что содержимое iframe имеет полосы прокрутки на элементах ниже html элемент!

Некоторые макеты установлены html а также body до 100% высоты, и используйте #wrapper Div с overflow: auto; (или же scroll), тем самым перемещая прокрутку к #wrapper элемент.

В таком случае ничто из того, что вы сделаете, не помешает появлению полос прокрутки, кроме редактирования содержимого другой страницы.

Answer 8

Добавьте это в свой CSS, чтобы скрыть обе полосы прокрутки

iframe 
{
  overflow-x:hidden;
  overflow-Y:hidden;
}

Answer 9

<div id="myInfoDiv" seamless="seamless" scrolling="no" style="width:100%; height: 100%; float: left; color: #FFF; background:#ed8719; line-height:100%; font-size:100%; font-family: sans-serif>;

Используйте приведенный выше div, и он не будет показывать полосу прокрутки в любом браузере.

Answer 10

Answer 11

iframe {
  display: block;
  border: none;         /* Reset default border */
  height: 100vh;        /* Viewport-relative units */
  width: calc(100% + 17px);
}
div {
  overflow-x: hidden;
}

Таким образом вы увеличиваете ширину iframe больше, чем должна быть. Затем вы скрываете горизонтальную полосу прокрутки с помощью overflow-x: hidden.

Answer 12

Это последнее средство, но стоит упомянуть - вы можете использовать ::-webkit-scrollbar псевдоэлемент на iframeРодитель, чтобы избавиться от этих знаменитых полос прокрутки 90-х годов.

::-webkit-scrollbar {
    width: 0px;
    height: 0px;
}

Изменить: хотя это относительно поддерживается, ::-webkit-scrollbar может не подходить для всех браузеров. используйте с осторожностью:)

Answer 13

Добавьте это в свой CSS, чтобы скрыть только горизонтальную полосу прокрутки

iframe{
    overflow-x:hidden;
}

Answer 14

Ни один из приведенных выше ответов не помог мне. Вот что сделали в JS:

Выберите элемент iframe:

      var iframe_name = document.getElementById("iframe_name");

Добавьте к нему атрибут:

        iframe_name.scrolling = "no";

Answer 15

Вместо iframe:

      const blob = new Blob([data], { type: "application/pdf" });
const link = document.createElement("a");
const URL = window.URL.createObjectURL(blob);
link.href = URL;
link.download = filename;
//download the pdf
link.click();
//open the downloaded pdf in its default viewer
window.open(URL);

Answer 16

Использование отрицательного поля и скрытого переполнения, чтобы скрыть полосу прокрутки

      <div class="scrollbar-hider" style="overflow:hidden">
        <div class="scrollbar-hider-margin" style="margin-right: -17px;">
            <iframe src="" 
                    style="display: block; 
                           overflow: hidden scroll; 
                           height:calc(100vh - 65px); 
                           width: 100%" 
                    frameborder="0" loading="lazy">
             </iframe>
        </div>
</div>

Answer 17

Answer 18

Когда ничего не работает, float:left может вас спасти.

iframe{поплавок: влево; ясно: оба;}

Answer 19

бесшовная = «бесшовная» прокрутка = «нет»

— это два атрибута, которые используются для удаления полосы прокрутки и слабой линии, окаймляющей iframe.

Вы можете комбинировать это с другими атрибутами ограничения размера, чтобы встроить страницу в другую так, чтобы она не выглядела так, как вы. Это помогает воссоздать данные, которые обычно приходится перекодировать и занимать место на сервере.

Наконец, включение якорей, таких как <href, позволит вам направить iframe на определенную часть страницы. Вы должны грубо создать метку вызова на этой странице, направленной на объект.

Веселиться!!!! :)