phpjshtmlcssblog

как убрать прокрутку в iframe

"прокрутка iframe" или как убрать прокрутку в iframe. У тега iframe, при несоответствии высоты или ширины с содержанием возникает полоса прокрутки! Это совсем неэстетично!

Поэтому удалим прокрутку в iframe

1. Пример прокрутки в iframe
2. Как убрать прокрутку iframe - живой пример!
3. Способ №2 убрать прокрутку iframe - живой пример!

Скопировать ссылку



Пример прокрутки в iframe

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

Для этого нам понадобится:

Откуда будем айфремить - текст_ссылки

Добавим высоту и ширину attribute style (style="width: 300px; height: 150px;")...

Далее создаем собственно наш iframe:

<iframe style="width: 300px; height: 150px;" src="https://dwweb.ru/__a-data/__all_for_scripts/__examples/iframe/test_iframe_1.php" scrolling="no"></iframe>

Выведем наш получившийся блок:

Результат iframe с прокруткой:

Не забываем сказать спасибо! Я старался для вас!


Как видим... у нашего блока появилась отвратительная прокрутка!

Есть несколько способов удалить прокрутку см.ниже:

Скопировать ссылку



Как убрать прокрутку iframe - живой пример!

Выше мы увидели прокрутку и давайте далее у этого блока удалим прокрутку, это будет:

Способ номер 1 убрать прокрутку в iframe

Далее мы возьмем... опять наш адрес страницы, которую будем айфремить - для этого способа не нужно создавать новую страницу, возьмем из предыдущего пункта:

https://dwweb.ru/__a-data/__all_for_scripts/__examples/iframe/test_iframe_1.php

Тот же код iframe

<iframe style="width: 300px; height: 150px;" src="https://dwweb.ru/__a-data/__all_for_scripts/__examples/iframe/test_iframe_1.php"></iframe>

Выводить с прокруткой не будем... выше мы уже видели этот iframe выше.

Теперь - нам нужно добавить атрибут "scrolling" со значением "no" итого у нас получится:

<iframe style="width: 300px; height: 150px;" src="https://dwweb.ru/__a-data/__all_for_scripts/__examples/iframe/test_iframe_1.php" scrolling="no"> </iframe>

Выведем код окна iframe без прокрутки:

Не забываем сказать спасибо! Я старался для вас!


Результат удаления прокрутки iframe

Как видим наш результат: - мы убрали прокрутку у iframe

Скопировать ссылку



Способ №2 убрать прокрутку iframe - живой пример!

Для удаления прокрутки у iframe есть еще один способ!

Для иллюстрации удаления прокрутки в iframe нам понадобится:

Для второго примера нам понадобится отдельная страница для получения данных в iframe

https://dwweb.ru/__a-data/__all_for_scripts/__examples/iframe/test_iframe_2.php


Если вы посмотрите код выше приведенной страницы, нажав сочетание клавши :

ctrl + U

То увидите вот такую картину, где следует обратить внимание на тег style и в нем присутствуют некие стили:

Эту картинку, скриншот, можно увеличить в отдельном окне нажмите по нему!


Стили на которые нужно было обратить внимание, где скрывается прокрутка с помощью overflow:

<style>
  ;body{overflow: hidden;}
</style>


Данный код, на страницу можно поставить любым редактором кода или даже в простом блокноте:



Ну и далее... аналогично создаем окно iframe и выведем данный клод прямо здесь:

Результат iframe без прокрутки!

Как видим у окна iframe была удалена прокрутка!

Не забываем сказать спасибо! Я старался для вас!

Сообщение системы комментирования :

01.09.2021

Форма пока доступна только админу... скоро все заработает...надеюсь...