Почему scrollTo с начало срабатывает, а потом кидает обратно

Question

window.onload = function() {
  let y = document.querySelectorAll(".wrapper div")[12].offsetTop;
  let x = document.querySelectorAll(".wrapper div")[12].offsetLeft;
  window.scroll({
    top: y,
    left:x,
  })

};

body {
  margin: 0;
  padding: 0;
  -webkit-perspective: 100px;
          perspective: 100px;
  -webkit-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease; }
  body .wrapper {
    display: grid;
    grid-template-columns: 44% 44% 44% 44% 44%;
    grid-template-rows: 44% 44% 44% 44% 44%;
    grid-gap: 0; }
    body .wrapper div.about {
      background-color: aliceblue; }
    body .wrapper div.bower {
      background-color: darkgreen; }
    body .wrapper div.contact {
      background-color: crimson; }
    body .wrapper div.extra {
      background-color: chocolate; }
    body .wrapper div.main {
      background-color: chartreuse; }
    body .wrapper div.portfolio {
      background-color: brown; }
    body .wrapper div.service {
      background-color: blueviolet; }
    body .wrapper div.stub1 {
      background-color: blue; }
    body .wrapper div.stub2 {
      background-color: aqua; }
    body .wrapper div iframe {
      overflow: hidden; }

<body>
<div class="wrapper">
    <div class="main">1
    </div>
    <div class="about">1
    </div>
    <div class="portfolio">1
    </div>
    <div class="main">1
    </div>
    <div class="about">1
    </div>
    <div class="service">1
    </div>
    <div class="bower">1
    </div>
    <div class="contact">1
    </div>
    <div class="service">1
    </div>
    <div class="bower">1
    </div>
    <div class="extra">1
    </div>
    <div class="stub1">1
    </div>
    <div class="stub2">1
    </div>
    <div class="extra">1
    </div>
    <div class="stub1">1
    </div>
    <div class="main">1
    </div>
    <div class="about">1
    </div>
    <div class="portfolio">1
    </div>
    <div class="main">1
    </div>
    <div class="about">1
    </div>
    <div class="service">1
    </div>
    <div class="bower">1
    </div>
    <div class="contact">1
    </div>
    <div class="service">1
    </div>
    <div class="bower">2
    </div>
</div>
</body>

работает тут, и в FireFox, но в хром не работает

Answer 1

Хром, если закэшировал позицию скрола, в следующий раз будет к ней возвращаться. Он это делает, чтобы не терять место просмотра на больших страницах при навигации назад-вперёд. Этот возврат к месту в документе (скрол) срабатывает после события onload. Получается, что вы сначала скролите скриптом, а потом браузер скролит после вас к тому месту, которое помнит ранее. Убедиться в этом можно так (скопируйте в страницу и запустите):

<html>
<head>
    <script>
        window.onload = function() {
            console.log('page loaded');
          let y = document.querySelectorAll(".wrapper div")[12].offsetTop;
          let x = document.querySelectorAll(".wrapper div")[12].offsetLeft;
          window.scroll({
            top: y,
            left:x,
          });
          console.log('we make scrolling to elem');
        };
        window.addEventListener('scroll',()=>{
            console.log('page scrolled');
        });
    </script>
    <style>
        body {
          margin: 0;
          padding: 0;
          -webkit-perspective: 100px;
                  perspective: 100px;
          -webkit-transition: all 0.5s ease;
          -o-transition: all 0.5s ease;
          transition: all 0.5s ease; }
          body .wrapper {
            display: grid;
            grid-template-columns: 44% 44% 44% 44% 44%;
            grid-template-rows: 44% 44% 44% 44% 44%;
            grid-gap: 0; }
            body .wrapper div.about {
              background-color: aliceblue; }
            body .wrapper div.bower {
              background-color: darkgreen; }
            body .wrapper div.contact {
              background-color: crimson; }
            body .wrapper div.extra {
              background-color: chocolate; }
            body .wrapper div.main {
              background-color: chartreuse; }
            body .wrapper div.portfolio {
              background-color: brown; }
            body .wrapper div.service {
              background-color: blueviolet; }
            body .wrapper div.stub1 {
              background-color: blue; }
            body .wrapper div.stub2 {
              background-color: aqua; }
            body .wrapper div iframe {
              overflow: hidden; }
    </style>
</head>
<body>
    <div class="wrapper">
        <div class="main">1
        </div>
        <div class="about">1
        </div>
        <div class="portfolio">1
        </div>
        <div class="main">1
        </div>
        <div class="about">1
        </div>
        <div class="service">1
        </div>
        <div class="bower">1
        </div>
        <div class="contact">1
        </div>
        <div class="service">1
        </div>
        <div class="bower">1
        </div>
        <div class="extra">1
        </div>
        <div class="stub1">1
        </div>
        <div class="stub2">1
        </div>
        <div class="extra">1
        </div>
        <div class="stub1">1
        </div>
        <div class="main">1
        </div>
        <div class="about">1
        </div>
        <div class="portfolio">1
        </div>
        <div class="main">1
        </div>
        <div class="about">1
        </div>
        <div class="service">1
        </div>
        <div class="bower">1
        </div>
        <div class="contact">1
        </div>
        <div class="service">1
        </div>
        <div class="bower">2
        </div>
    </div>
</body>
</html>

Соответственно попробуйте сделать таймер в onload, а не скролить сразу:

window.onload = ()=>{
    let y = document.querySelectorAll(".wrapper div")[12].offsetTop;
    let x = document.querySelectorAll(".wrapper div")[12].offsetLeft;
    setTimeout(()=>{
        window.scroll({
            top: y,
            left:x,
        });
    }, 1000 );
};

БЛОГ НА HUSL

Почему scrollTo с начало срабатывает, а потом кидает обратно

Ответы (1 шт):