Отрицательные значения Y и Top для boundingClientRect после прокрутки и возврата - PullRequest
Новая
       72

Отрицательные значения Y и Top для boundingClientRect после прокрутки и возврата

0 голосов
/ 29 апреля 2020

Я читал документацию и примеры на IntersectionObserver для обнаружения свитков. Эти примеры в значительной степени основаны на результатах element.boundingClientRect .

Я играл с этим все утро и кое-что, что я не совсем понимаю по поводу boundingClientRect : когда страница загружена, элемент, который я наблюдаю, имеет положительную позицию y и top , которая становится отрицательной, когда я прокручиваю и элемент больше не отображается. Это кажется нормальным, но я ожидал, что числа вернутся к своему первоначальному значению и будут положительными после прокрутки назад к исходной позиции элемента.

Может кто-нибудь объяснить мне, почему это не так?

пример кода ниже и здесь на jsfiddle: https://jsfiddle.net/jueast08/x0t9fjbr/17/

HTML

 <section id="home" class="home">
    <div class="home__container">
      <div class="home__container__titles">
        <h1 class="home__container__titles__title">Name</h1>
        <h1 class="home__container__titles__title">Lastname</h1>
      </div>
      <div class="home__container__subtitles col-12">
        <p class="home__container__subtitles__subtitle">
          Subtitle
        </p>
      </div>
    </div>
    <div id="results"> 
    </div>
    <div id="extra-bagage">

    </div>
</section>

S CSS

.home {
  &__container {
    &__titles {
      background: red;
    }
  }
  #results {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 50px;
    background: gray;
  }
  #extra-bagage {
    height: 200vh;
    width: 100vh;
  }
}

let observer = new IntersectionObserver(entries => {
        let results = entries[0].boundingClientRect;
    document.getElementById('results').innerHTML = 'y = '+results.y+' top = '+results.top;
});

observer.observe(document.querySelector('.home__container__titles'));
...