Как скрыть scrollbar в iframe, но оставить возможность скролла?

Question

[DEFUNK]

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

Получилось такая структура:

<div class="image-iphone">
<iframe src="/portfolio/energy-diet/mobile/image-1.jpg" width="320" height="570">Your browser does not support iframes!</iframe>
</div>

В css такое:

.image-iphone {
    background: url(../img/image-iphone.png) no-repeat;
    width:365px;
    height:758px;
    margin:0 auto;
}

.image-iphone iframe {
    margin-top:93px;
    margin-left: 23px;
    border:0;
}

Но никак не получается скрыть скроллбар в айфрейме! Давал overflow:hidden и родителю и ребёнку - не помогает. Атрибут scrolling="no" убрал скроллбар, но и возможность скроллить тоже. Помогите решить проблему...

Answer 1

[Alex]

Можно просто спрятать скролл-бар за дивкой.

.image-iphone {
   overflow: hidden;
}

.image-iphone iframe {
    margin-right: -20px
}

Comments

[DEFUNK]

Окей, как я понял нужно поменять структуру. Я так и попробовал сделать: сверху мокап айфона, а под ним расположил айфрейм. Но скролл то перекрывает верхний див (я про возможность скролла)

[Alex]

Так должно перекрыть.

.image-iphone {
   overflow: hidden;
   position: relative;
   z-index: 2
}

.image-iphone iframe {
    margin-right: -20px
    z-index:1;
}

[DEFUNK]

Alex: я подобно этому и сделал. Только пришлось достать айфрем c дива и запихнуть его ниже, ибо нельзя давать z-index меньше чем есть родитель - эффект будет нулевой)

Но как написал выше, такой вариант не работает. Верхний див не даёт скроллить.

[Alex]

DEFUNK: Походу да. Он будет блокировать скрол.

Answer 2

[Mikhail Osher]

Пользуемся поиском.