3 Способу прибрати смуги прокрутки в iframe-вкладці

Способів прибрати смуги прокрутки є досить багато. Я покажу 3 з них, які я застосовував і які перевірені.

Причини появи смуг прокрутки.

  1. Контент на вкладці по ширині перевищує 520 пікселів.
  2. Якщо контент не перевищує 520 пікселів, то залишилися відступи і за рахунок них загальна ширина виходить більше 520 пікселів.
  3. Висота контенту перевищує 800 пікселів. За замовчуванням iframe розрахований на висоту 800 пікселів без смуг прокрутки. Якщо висота більше, то ваш контент буде або обрізатися, або з'явиться жахлива вертикальна і горизонтальна смуга прокрутки (залежить від верстки).

Спосіб №1.

Значення appId: - вставляєте ID вашого застосування. Значення height: - пишіть потрібну висоту.

Спосіб №2.

Цим способом я користувався найчастіше. Його перевага: скрипт прибирає смуги прокрутки, навіть якщо висота вкладки змінюється динамічно. Тобто ви один раз все налаштували і можете бути спокійні, що смуг прокручування буде при збільшенні висоти контенту на вкладці. Цей скрипт складається з двох частин. Перша частина вставляється перед закриває тегом . Приклад коду першої частини.

А друга частина вставляється перед закриває тегом . Приклад коду другій частині.

Вам потрібно тільки замінити ID додаток у другій частині коду і все. Можете сміливо копіювати обидві частини і вставляти їх собі в html або php файл.

Спосіб №3.

Цей спосіб використовується на iframe-вкладках на офіційних Сторінках Facebook. Я останнім часом застосовую тільки його. Він простий, універсальний і прибирає смуги прокручування при будь-якій висоті. Цей скрипт вставляється відразу після тега . Приклад коду.

У цьому коді треба замінити тільки ID додатки і все. Значення FB.Canvas.setAutoGrow (10) це інтервал оновлення даних про висоті і ширині iframe-вкладки, щоб не з'являлися смуги прокрутки. У цьому прикладі його значення 10 мс. Рекомендується вказувати від 10 до 100 мс.

У цьому випадку все повинно відображатися як треба.

Тепер для вас проблеми смуг прокрутки не буде, і ви можете повністю зосередитися на вирішенні основних технічних завдань.

P.S. Також завжди пам'ятайте про CSS. Необхідно прибирати все відступи за замовчуванням. Як це зробити, я розповів в наступній статті.

Схожі записи:

Схожі статті