Автоматическая прокрутка страницы вниз

Question

Я создал HTML-страницу с несколькими текстовыми абзацами. Я хотел, чтобы автоматически прокручивал дно после открытия страницы. Поэтому я использовал следующий Javascript, и он работает нормально. скажем, это page.html

Но тогда мне нужно было отобразить его внутри iframe. Допустим, главная страница имеет вид index.html, index.html имеет тег iframe: <iframe src="./page.html"></iframe>

Он также работал при загрузке внутри iframe в основных браузерах (Chrome, Firefox, IE, Opera) , но не в мобильном браузере Apple Safari.

Я тестировал прямую HTML-страницу page.html с помощью мобильного браузера Safari, и она работала!

Но после загрузки той же страницы внутри iframe в index.html это не сработало.

Это Javascript, который я использовал в page.html

<script language="javascript">
function autoScrolling() { window.scrollTo(0,document.body.scrollHeight); }
setInterval(autoScrolling, 1000); 
</script>

Пожалуйста, предложите мне исправление кода для мобильного браузера Apple Safari

Answer 1

вы должны использовать -webkit-overflow-srolling: touch на родительском элементе iframe и установить высоту для вашего iframe.

<style>
.parent-iframe {
   -webkit-overflow-srolling: touch;
   overflow-y: auto;
}
iframe {
  height: 100vh
}
</style>
<div class="parent-iframe">
 <iframe src="http://someurl.com ...>
</div>

Также, если в вашем iframe есть некоторые элементы position: fixed, они не будут исправлены в ios safari. Вы можете попробовать это решение, чтобы избежать этого:
https://github.com/PierBover/ios-iframe-fix

Answer 2

Вам нужно использовать -webkit-overflow-scrolling: touch, пример:

<div style="overflow: scroll !important; -webkit-overflow-scrolling: touch !important;">
     <iframe ...> ... </iframe>
</div>