Вставьте html-страницу в другую и прокрутите ее, используя родительскую полосу прокрутки. - PullRequest
Новая
       10

Вставьте html-страницу в другую и прокрутите ее, используя родительскую полосу прокрутки.

0 голосов
/ 03 мая 2018

Я бы хотел, чтобы содержимое html-страницы отображалось на другой (родительской) html-странице, растягивало встроенную веб-страницу до ширины родительской, а также удаляло полосу прокрутки встроенной веб-страницы, одновременно прокручивая вниз содержимое встроенной веб-страницы с использованием полосы прокрутки главной страницы, так как высота встроенного содержимого слишком велика для размещения. Я пытался использовать код из ответов на похожие проблемы, в том числе: 

    <iframe style='overflow:hidden; width:100%; height:100%' scrolling = "no" src="annotated list of courses.html" frameborder="0" width="100%" height="100%"> </iframe>

но я не могу достичь желаемого результата. Я хотел бы иметь возможность прокручивать содержимое встроенной веб-страницы с помощью полосы прокрутки родительской страницы. Это возможно (без необходимости копировать код из встроенного HTML вместо родительского) и как? Спасибо.

Ответы [ 2 ]

0 голосов
/ 20 января 2019

Я решил это, используя два DIV, один внутри другого. 

<div style="overflow-y: hidden; border: 2px solid black; width: 300px; height: 300px; position:absolute; left: 100px; top: 100px">
    <div style="margin-top: -100px; width: 300px; height: 400px">
        <iframe scrolling="no" style='pointer-events: none; width:100%; height: 100%' src="https://earth.nullschool.net/#current/wind/surface/level/orthographic=-325.19,32.21,3000/loc=35.073,31.923" frameborder="0" type="text/html"></iframe>
    </div> 
</div>

Я отключил полосы прокрутки, установив scrolling = "no"
Я отключил клики пользователей, установив style = 'pointer-events: none;'

Вот рабочий образец - https://jsfiddle.net/q46L1ynv/

0 голосов
/ 03 мая 2018

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

<div id="content" class="content content-full" style="margin-top: -40px;">
    <iframe style='overflow-y:hidden; width:100%; height:17560px' src="annotated list of courses.html" frameborder="0" width="100%" height="17560px" type="text/html"> </iframe>
</div>

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

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

...