Jak skrýt posuvník v <iframe>
Jak pomocí CSS skrýt scrollbar u stránky vložené přes <iframe>.
Element <iframe> se v minulosti používal ke skládání stránek, v dnešní době se zpravidla používá pro vkládání služeb třetích stran na vlastní stránky.
Typicky věci jako:
- chatovací okno,
- nápověda,
- platební brána,
- dotazník,
- reservační kalendáře
Výhoda rámu je v tomto případě hlavně v tom, že jsou obě stránky od sebe isolované.
Nepřepisují si tak styly nebo skripty. Komunikace mezi stránkou A a stránkou B obvykle probíhá jen přes postMessage.
Z isolovanosti stránky načítané v <iframe> vyplývá, že scrollbar nejde ovlivňovat. Nebo by alespoň neměl jít, protože jde o část stránky v rámu načítané.
Zákaz scrollování
Jedna možnost, jak se scrollbaru zbavit, je zabránit rolování HTML atributem scrolling="no".
To může být trochu nepraktické, protože se potom nejde dostat k případnému obsahu, který se nevejde.
Skrytí scrollbaru
Při zachování možnosti rolovat jde využít CSS triku, kdy se pro <iframe> nastaví šířka o šířku posuvníku větší (pomocí calc).
To se ořízne přes overflow: hidden pro obal rámu.
Šířka posuvníku bývá zpravidla do 17 px.
.no-scrollbar {
width: 100%;
overflow: hidden;
}
.no-scrollbar__iframe {
width: calc(100% + 17px);
}
Komentáře