scrollIntoView / scrollTo при использовании внутри iframe не отвечает в IOS

Question

У меня есть приложение, которое отображается на веб-сайте с использованием iframe.

Пожалуйста, ознакомьтесь с этим jsfiddle -> http://jsfiddle.net/7Leatwyu/

Здесь также есть стек, который имеет такой же код, что и мой угловойapp https://stackblitz.com/edit/angular-c2dnea

Здесь вы увидите, что я попробовал несколько вещей, таких как добавление стиля CSS в учетную запись для прокрутки, включая:

position: absolute; 
top: 0;
left: 0;
right: 0;
bottom:0;
height: 100%;
overflow: auto;
width: 100%;
background-color: white;
z-index: 1000;
-webkit-overflow-scrolling: touch; 

Когда вы отвечаете на вопрос или нажимаете следующую кнопку, он используеткод ниже, чтобы перейти к следующему правильному вопросу.Как вы увидите, для каждого устройства, кроме iPhone (IOS), это работает.Для IOS - не работает.

scrollTo(el): void {
    const element = document.querySelector(`#${el}`)
    element.scrollIntoView({behavior: "smooth", block: "start", inline: "nearest"});
  }

После того, как это вызвано, я ожидаю, что окно перейдет к следующему вопросу, но это не так.Есть ли работа вокруг?Я исследовал это уже неделю и попробовал много разных javascript и CSS решений, которые не работали.

Помогите ..

Answer 1

Я ненавижу несколько браузеров.Делает жизнь веб-дизайнера болезненной.

В любом случае caniuse scrollIntoView Не имеет лучшей поддержки в браузерах Safari OLDER .Все еще не 100% на более новых.

Можно ли использовать jquery ??

$('html, body').animate({
  scrollTop: $("div.top").offset().top
}, 1000)

Как это?

$(document).ready(function () {
  $('#submit').click(function (){
    $('html, body').animate({
      scrollTop: $(".somediv").offset().top
    }, 1000)
  })
});

.somediv {
  width: 100%;
  height: 100vh;
  background-color: blue;
  margin-top: 100vh;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text"><br />
<a id="submit" href="#">Submit</a>
<div class="somediv"></div>

Я не знаю, является ли это именно тем, чего вы пытаетесь достичь.Еще один способ взглянуть на прокрутку к следующему.

Вы всегда можете сначала обернуть его в оператор if:)