Выделите якорь с ленивой загрузкой на странице - PullRequest
Новая
       8

Выделите якорь с ленивой загрузкой на странице

0 голосов
/ 21 сентября 2018

В настоящее время я работаю над плавной прокруткой, нажимая на якорь с "#".

Мой код в настоящее время выглядит следующим образом: 

(function() {
  let getElementOffset = (el) => {
      const rect = el.getBoundingClientRect();

      return {
          top: rect.top + window.pageYOffset,
          left: rect.left + window.pageXOffset,
      };
  };
  let anchors = document.getElementsByClassName('js-scroll');
  Array.from(anchors).map(function(anchor) {
      anchor.addEventListener('click', function(event) {
          event.preventDefault();
          history.pushState({}, "", this.getAttribute('href'));
          window.scrollTo({ top: getElementOffset(document.getElementById(this.getAttribute('href').substr(1))).top, behavior: 'smooth' });
      });
  });
            })();
<a class="js-scroll" href="#buy">Buy</a>
<img class="lazy" data-src="path/to/image" src="placholder.png" />
<div id="buy">
  content to scoll to
</div>

Прокрутка отлично работает на страницах без отложенной загрузки изображений или когда изображения уже загружены.

Я знаю, в чем проблема:в тот момент, когда я нажимаю на якорь, положение прокрутки отличается от момента прокрутки.В данный момент я прокручиваю изображения, загружаемые через ленивую загрузку и x-шнур для прокрутки к изменениям.

Как я могу обнаружить новый правый x-шнур для прокрутки до?

...