Как прокрутить iframe и родительскую страницу одновременно?

Question

Как прокрутить iframe и родительскую страницу одновременно?

0

У меня есть страница, в которой навигатор (заголовок) является постоянным, а полоса прокрутки перемещается, а фон перемещается вместе со строкой прокрутки. В то же время текст внутри тела скрыт под навигационной панелью. Фон распространен как для навигации, так и для текста. Я хочу сделать это, я хочу переместить текст внутри "static-container" в iframe. Возможно ли работать со строкой прокрутки iframe и главной страницы одновременно? В скрипке, которую я опубликовал, есть вертикальная полоса прокрутки только для текста. Могу ли я получить его для всей страницы (одна полоса прокрутки)?

JSFIDDLE

//code $(document).ready(function() {
    $(".content").scroll(function() {
       $("body").css("background-position", "0 -" + $(this).scrollTop() + "px");
    }); });

Mouser 04 март 2014, в 14:34

Источник

Теги:

javascript

jquery

html

css

html5

1 ответ

Ещё вопросы

Mouser · Answer 1 · 2014-12-16T14-27-00.000Z

Я точно не знаю, что вам нужно, но у меня есть ключ. Если я прав, вы хотите изменить static-container div в iframe. Некоторая часть для простой части. Если я все еще прав, если содержимое прокрутки iframe должно действительно прокручивать главную страницу?

Там один или два способа сделать это:

Вам нужно знать высоту содержимого страницы, загруженной в iframe, и соответствующим образом настроить iframe.
Заполните iframe внутри содержимого div.
Скрыть полосу прокрутки в iframe, но как-то обнаружить прокрутку. Однако это будет непростой задачей, и дорога к этому будет полна выбоин.

Я собираюсь предоставить решение для вариантов 1 и 2.

сначала переделайте свой div в iframe.

//HTML
    <iframe onload="detectIframeCompletion()" src="/" id="static_container" class="static-container" frameborder=0 seamless="true" sandbox="allow-same-origin" style="width:100%;height:auto">

бесшовные позволяет iFrame иметь прозрачный фон, течет с документом. чтобы вы могли использовать страницы из одного и того же доверенного источника. Помните, что вы не можете выполнять междоменные звонки. Это приведет к отказу доступа.

ДЛЯ ВАРИАНТА 1

Во-вторых, вам нужно кодировать, чтобы обнаружить, когда страница завершила загрузку.

function detectIframeCompletion()
{
    var elementIframe = document.getElementById("static_container");
    //Now access the iframe document via: contentDocument > documentElement (HTML-tag) > scrollHeight
    document.getElementById("static_container").style.height = elementIframe.contentDocument.documentElement.scrollHeight + "px";

}

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

ДЛЯ ВАРИАНТА 2

Пожалуйста, проигнорируйте все JavaScript из опции 1. Просто добавьте этот CSS в свой CSS.

.content {
    top:65px;
    overflow: hidden;
    bottom: 0px;
    width: 100%;
    position: fixed;
}

.content > iframe {
    height: 100%;
    width : 100%;
}

Это добавит только прокрутку в iframe, когда содержимое iframe будет переполнено.

Вывод

Используйте параметр 1 когда вам нужно добавить контент ниже iframe, и вы хотите только одну полосу прокрутки. Используйте опцию 2 когда весь контент загружается в iframe.

Наиболее важные уроки из этого ответа:

Seamless (или наследственные allowtransparency), чтобы сделать поток iframe с документом
Используйте sandbox для включения содержимого (из одного источника) для доступа.
При определении переменных CSS в HTML5 (CSS или через JavaScript) всегда добавляйте блок. Ie px.

Примечание: только браузер с поддержкой HTML5 сможет сделать это правильно. Для майоров: IE9+, Firefox и Chrome.