БЛОГ НА HUSL


Чем заменить getBoundingClientRect на iPhone Mobile Safari?

Автор вопроса: Вася

Есть блок с текстом и кнопка, которая ведёт наверх экрана и которая появляется по мере прокручивания текста вниз. Везде отрабатывает хорошо за исключением iphone в браузере safari (кнопка не прокручивает в самый верх блока) в силу того, что мобильный сафари не знает метода getBoundingClientRect(). Как найти эквивалент данному методу и обучить работать в iPhone Mobile Safari ?

// detect support for the behavior property in ScrollOptions
const supportsNativeSmoothScroll = 'scrollBehavior' in document.documentElement.style;

function SmoothVerticalScrolling(time, position) {
  var eTop = document.body.getBoundingClientRect().top;
  var eAmt = eTop / 100;
  var curTime = 0;
  while (curTime <= time) {
    window.setTimeout(SVS_B, curTime, eAmt, position);
    curTime += time / 100;
  }
}

function SVS_B(eAmt) {
  window.scrollBy(0, eAmt);
}

// Animate scroll to up
const btnUp = document.querySelector('.btn_to_up');
if (btnUp) {
  btnUp.addEventListener('click', function(e) {
    e.preventDefault();
    if (supportsNativeSmoothScroll) {
      document.querySelector('html,body').scrollIntoView({
        behavior: 'smooth'
      });
    } else {
      SmoothVerticalScrolling(600, "top");
    }
  });

  let wHeight = document.documentElement.clientHeight;

  function ScrollResizeFunction(e) {
    if (pageYOffset >= wHeight) {
      btnUp.classList.add('active');
    } else {
      if (btnUp.classList.contains('active')) {
        btnUp.classList.remove('active');
      }
    }
  }

  window.addEventListener('load', function(e) {
    window.addEventListener('scroll', ScrollResizeFunction);
    window.addEventListener('resize', ScrollResizeFunction);
  });
}
.body {
  position: relative;
}

.btn_to_up {
  position: fixed;
  bottom: 30px;
  right: -50px;
  background-size: contain;
  border-radius: 50%;
  width: 48px;
  height: 48px;
  transition: 0.3s;
  background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDgiIGhlaWdodD0iNDgiIHZpZXdCb3g9IjAgMCA0OCA0OCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGNpcmNsZSBjeD0iMjQiIGN5PSIyNCIgcj0iMjQiIGZpbGw9IiM0QkM2RjYiLz4KPHBhdGggZD0iTTIzLjEzMzQgMTcuNjY2NVYzMi4zNTcyQzIzLjEzMzQgMzIuNTgzMSAyMy4yMjY2IDMyLjc5ODIgMjMuMzg5OCAzMi45NTU3QzIzLjU1MjkgMzMuMTEyOSAyMy43NzI1IDMzLjIgMjQgMzMuMkMyNC4yMjc1IDMzLjIgMjQuNDQ3MSAzMy4xMTI5IDI0LjYxMDIgMzIuOTU1N0MyNC43NzM0IDMyLjc5ODIgMjQuODY2NiAzMi41ODMxIDI0Ljg2NjYgMzIuMzU3MlYxNy42NjY1TDI4LjcyMTggMjEuMzg1NUwyOC43MjE4IDIxLjM4NTZDMjguODg1IDIxLjU0MjkgMjkuMTA0OCAyMS42MzAxIDI5LjMzMjYgMjEuNjMwMUMyOS41NjAzIDIxLjYzMDEgMjkuNzgwMiAyMS41NDI5IDI5Ljk0MzQgMjEuMzg1NkMzMC4xMDY4IDIxLjIyOCAzMC4yIDIxLjAxMjYgMzAuMiAyMC43ODY1QzMwLjIgMjAuNTYwNCAzMC4xMDY4IDIwLjM0NSAyOS45NDM0IDIwLjE4NzRMMjQuNjEwOSAxNS4wNDUxQzI0LjUzMDEgMTQuOTY2OSAyNC40MzQ1IDE0LjkwNTMgMjQuMzI5OCAxNC44NjM0QzI0LjIyNSAxNC44MjE1IDI0LjExMyAxNC44IDI0IDE0LjhDMjMuODg3IDE0LjggMjMuNzc1IDE0LjgyMTUgMjMuNjcwMiAxNC44NjM0QzIzLjU2NTUgMTQuOTA1MyAyMy40Njk5IDE0Ljk2NjkgMjMuMzg5MSAxNS4wNDUxTDE4LjA1NjYgMjAuMTg3NEMxNy44OTMyIDIwLjM0NSAxNy44IDIwLjU2MDQgMTcuOCAyMC43ODY1QzE3LjggMjEuMDEyNiAxNy44OTMyIDIxLjIyOCAxOC4wNTY2IDIxLjM4NTZDMTguMjE5OCAyMS41NDI5IDE4LjQzOTcgMjEuNjMwMSAxOC42Njc0IDIxLjYzMDFDMTguODk1MiAyMS42MzAxIDE5LjExNSAyMS41NDI5IDE5LjI3ODIgMjEuMzg1NkwxOS4yNzgyIDIxLjM4NTVMMjMuMTMzNCAxNy42NjY1WiIgZmlsbD0id2hpdGUiIHN0cm9rZT0id2hpdGUiIHN0cm9rZS13aWR0aD0iMC40Ii8+Cjwvc3ZnPgo=) no-repeat 50%;
  cursor: pointer;
}

.btn_to_up.active {
  right: 30px;
}
<div class="body">
  <div>Lorem ipsum dolor sit amet consectetur adipisicing, elit. Temporibus impedit hic nesciunt voluptatibus commodi aliquid, quis sequi doloribus? Nobis amet aut iste assumenda odio atque expedita perferendis repellendus tempora voluptatum.</div>
  <div>Lorem ipsum dolor sit amet consectetur adipisicing, elit. Temporibus impedit hic nesciunt voluptatibus commodi aliquid, quis sequi doloribus? Nobis amet aut iste assumenda odio atque expedita perferendis repellendus tempora voluptatum.</div>
  <div>Lorem ipsum dolor sit amet consectetur adipisicing, elit. Temporibus impedit hic nesciunt voluptatibus commodi aliquid, quis sequi doloribus? Nobis amet aut iste assumenda odio atque expedita perferendis repellendus tempora voluptatum.</div>
  <div>Lorem ipsum dolor sit amet consectetur adipisicing, elit. Temporibus impedit hic nesciunt voluptatibus commodi aliquid, quis sequi doloribus? Nobis amet aut iste assumenda odio atque expedita perferendis repellendus tempora voluptatum.</div>
  <div>Lorem ipsum dolor sit amet consectetur adipisicing, elit. Temporibus impedit hic nesciunt voluptatibus commodi aliquid, quis sequi doloribus? Nobis amet aut iste assumenda odio atque expedita perferendis repellendus tempora voluptatum.</div>
  <div>Lorem ipsum dolor sit amet consectetur adipisicing, elit. Temporibus impedit hic nesciunt voluptatibus commodi aliquid, quis sequi doloribus? Nobis amet aut iste assumenda odio atque expedita perferendis repellendus tempora voluptatum.</div>
  <div>Lorem ipsum dolor sit amet consectetur adipisicing, elit. Temporibus impedit hic nesciunt voluptatibus commodi aliquid, quis sequi doloribus? Nobis amet aut iste assumenda odio atque expedita perferendis repellendus tempora voluptatum.</div>
    <div>Lorem ipsum dolor sit amet consectetur adipisicing, elit. Temporibus impedit hic nesciunt voluptatibus commodi aliquid, quis sequi doloribus? Nobis amet aut iste assumenda odio atque expedita perferendis repellendus tempora voluptatum.</div>
      <div>Lorem ipsum dolor sit amet consectetur adipisicing, elit. Temporibus impedit hic nesciunt voluptatibus commodi aliquid, quis sequi doloribus? Nobis amet aut iste assumenda odio atque expedita perferendis repellendus tempora voluptatum.</div>
        <div>Lorem ipsum dolor sit amet consectetur adipisicing, elit. Temporibus impedit hic nesciunt voluptatibus commodi aliquid, quis sequi doloribus? Nobis amet aut iste assumenda odio atque expedita perferendis repellendus tempora voluptatum.</div>
          <div>Lorem ipsum dolor sit amet consectetur adipisicing, elit. Temporibus impedit hic nesciunt voluptatibus commodi aliquid, quis sequi doloribus? Nobis amet aut iste assumenda odio atque expedita perferendis repellendus tempora voluptatum.</div>
            <div>Lorem ipsum dolor sit amet consectetur adipisicing, elit. Temporibus impedit hic nesciunt voluptatibus commodi aliquid, quis sequi doloribus? Nobis amet aut iste assumenda odio atque expedita perferendis repellendus tempora voluptatum.</div>
  <div class="btn_to_up"></div>
</div>


Источник

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

Автор решения: Вася

Решение в задействовании полифила для IE, Edge и Safari

// detect support for the behavior property in ScrollOptions
const supportsNativeSmoothScroll = 'scrollBehavior' in document.documentElement.style;

// polyfilled smooth scrolling for IE, Edge & Safari
const smoothScrollTo = (to, duration) => {
  const element = document.scrollingElement || document.documentElement,
    start = element.scrollTop,
    change = to - start,
    startDate = +new Date();

  // t = current time
  // b = start value
  // c = change in value
  // d = duration
  const easeInOutQuad = (t, b, c, d) => {
    t /= d / 2;
    if (t < 1) return c / 2 * t * t + b;
    t--;
    return -c / 2 * (t * (t - 2) - 1) + b;
  };

  const animateScroll = _ => {
    const currentDate = +new Date();
    const currentTime = currentDate - startDate;
    element.scrollTop = parseInt(easeInOutQuad(currentTime, start, change, duration));
    if (currentTime < duration) {
      requestAnimationFrame(animateScroll);
    } else {
      element.scrollTop = to;
    }
  };
  animateScroll();
};

// Animate scroll to up
const btnUp = document.querySelector('.btn_to_up');
if (btnUp) {
  btnUp.addEventListener('click', function(e) {
    e.preventDefault();
    if (supportsNativeSmoothScroll) {
      document.querySelector('html,body').scrollIntoView({
        behavior: 'smooth'
      });
    } else {
      smoothScrollTo(document.body.offsetTop, 600);
    }
  });

  let wHeight = document.documentElement.clientHeight;

  function ScrollResizeFunction(e) {
    if (pageYOffset >= wHeight) {
      btnUp.classList.add('active');
    } else {
      if (btnUp.classList.contains('active')) {
        btnUp.classList.remove('active');
      }
    }
  }

  window.addEventListener('load', function(e) {
    window.addEventListener('scroll', ScrollResizeFunction);
    window.addEventListener('resize', ScrollResizeFunction);
  });
}
.body {
  position: relative;
}

.btn_to_up {
  position: fixed;
  bottom: 30px;
  right: -50px;
  background-size: contain;
  border-radius: 50%;
  width: 48px;
  height: 48px;
  transition: 0.3s;
  background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDgiIGhlaWdodD0iNDgiIHZpZXdCb3g9IjAgMCA0OCA0OCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGNpcmNsZSBjeD0iMjQiIGN5PSIyNCIgcj0iMjQiIGZpbGw9IiM0QkM2RjYiLz4KPHBhdGggZD0iTTIzLjEzMzQgMTcuNjY2NVYzMi4zNTcyQzIzLjEzMzQgMzIuNTgzMSAyMy4yMjY2IDMyLjc5ODIgMjMuMzg5OCAzMi45NTU3QzIzLjU1MjkgMzMuMTEyOSAyMy43NzI1IDMzLjIgMjQgMzMuMkMyNC4yMjc1IDMzLjIgMjQuNDQ3MSAzMy4xMTI5IDI0LjYxMDIgMzIuOTU1N0MyNC43NzM0IDMyLjc5ODIgMjQuODY2NiAzMi41ODMxIDI0Ljg2NjYgMzIuMzU3MlYxNy42NjY1TDI4LjcyMTggMjEuMzg1NUwyOC43MjE4IDIxLjM4NTZDMjguODg1IDIxLjU0MjkgMjkuMTA0OCAyMS42MzAxIDI5LjMzMjYgMjEuNjMwMUMyOS41NjAzIDIxLjYzMDEgMjkuNzgwMiAyMS41NDI5IDI5Ljk0MzQgMjEuMzg1NkMzMC4xMDY4IDIxLjIyOCAzMC4yIDIxLjAxMjYgMzAuMiAyMC43ODY1QzMwLjIgMjAuNTYwNCAzMC4xMDY4IDIwLjM0NSAyOS45NDM0IDIwLjE4NzRMMjQuNjEwOSAxNS4wNDUxQzI0LjUzMDEgMTQuOTY2OSAyNC40MzQ1IDE0LjkwNTMgMjQuMzI5OCAxNC44NjM0QzI0LjIyNSAxNC44MjE1IDI0LjExMyAxNC44IDI0IDE0LjhDMjMuODg3IDE0LjggMjMuNzc1IDE0LjgyMTUgMjMuNjcwMiAxNC44NjM0QzIzLjU2NTUgMTQuOTA1MyAyMy40Njk5IDE0Ljk2NjkgMjMuMzg5MSAxNS4wNDUxTDE4LjA1NjYgMjAuMTg3NEMxNy44OTMyIDIwLjM0NSAxNy44IDIwLjU2MDQgMTcuOCAyMC43ODY1QzE3LjggMjEuMDEyNiAxNy44OTMyIDIxLjIyOCAxOC4wNTY2IDIxLjM4NTZDMTguMjE5OCAyMS41NDI5IDE4LjQzOTcgMjEuNjMwMSAxOC42Njc0IDIxLjYzMDFDMTguODk1MiAyMS42MzAxIDE5LjExNSAyMS41NDI5IDE5LjI3ODIgMjEuMzg1NkwxOS4yNzgyIDIxLjM4NTVMMjMuMTMzNCAxNy42NjY1WiIgZmlsbD0id2hpdGUiIHN0cm9rZT0id2hpdGUiIHN0cm9rZS13aWR0aD0iMC40Ii8+Cjwvc3ZnPgo=) no-repeat 50%;
  cursor: pointer;
}

.btn_to_up.active {
  right: 30px;
}
<div class="body">
  <div>Lorem ipsum dolor sit amet consectetur adipisicing, elit. Temporibus impedit hic nesciunt voluptatibus commodi aliquid, quis sequi doloribus? Nobis amet aut iste assumenda odio atque expedita perferendis repellendus tempora voluptatum.</div>
  <div>Lorem ipsum dolor sit amet consectetur adipisicing, elit. Temporibus impedit hic nesciunt voluptatibus commodi aliquid, quis sequi doloribus? Nobis amet aut iste assumenda odio atque expedita perferendis repellendus tempora voluptatum.</div>
  <div>Lorem ipsum dolor sit amet consectetur adipisicing, elit. Temporibus impedit hic nesciunt voluptatibus commodi aliquid, quis sequi doloribus? Nobis amet aut iste assumenda odio atque expedita perferendis repellendus tempora voluptatum.</div>
  <div>Lorem ipsum dolor sit amet consectetur adipisicing, elit. Temporibus impedit hic nesciunt voluptatibus commodi aliquid, quis sequi doloribus? Nobis amet aut iste assumenda odio atque expedita perferendis repellendus tempora voluptatum.</div>
  <div>Lorem ipsum dolor sit amet consectetur adipisicing, elit. Temporibus impedit hic nesciunt voluptatibus commodi aliquid, quis sequi doloribus? Nobis amet aut iste assumenda odio atque expedita perferendis repellendus tempora voluptatum.</div>
  <div>Lorem ipsum dolor sit amet consectetur adipisicing, elit. Temporibus impedit hic nesciunt voluptatibus commodi aliquid, quis sequi doloribus? Nobis amet aut iste assumenda odio atque expedita perferendis repellendus tempora voluptatum.</div>
  <div>Lorem ipsum dolor sit amet consectetur adipisicing, elit. Temporibus impedit hic nesciunt voluptatibus commodi aliquid, quis sequi doloribus? Nobis amet aut iste assumenda odio atque expedita perferendis repellendus tempora voluptatum.</div>
  <div>Lorem ipsum dolor sit amet consectetur adipisicing, elit. Temporibus impedit hic nesciunt voluptatibus commodi aliquid, quis sequi doloribus? Nobis amet aut iste assumenda odio atque expedita perferendis repellendus tempora voluptatum.</div>
  <div>Lorem ipsum dolor sit amet consectetur adipisicing, elit. Temporibus impedit hic nesciunt voluptatibus commodi aliquid, quis sequi doloribus? Nobis amet aut iste assumenda odio atque expedita perferendis repellendus tempora voluptatum.</div>
  <div>Lorem ipsum dolor sit amet consectetur adipisicing, elit. Temporibus impedit hic nesciunt voluptatibus commodi aliquid, quis sequi doloribus? Nobis amet aut iste assumenda odio atque expedita perferendis repellendus tempora voluptatum.</div>
  <div>Lorem ipsum dolor sit amet consectetur adipisicing, elit. Temporibus impedit hic nesciunt voluptatibus commodi aliquid, quis sequi doloribus? Nobis amet aut iste assumenda odio atque expedita perferendis repellendus tempora voluptatum.</div>
  <div>Lorem ipsum dolor sit amet consectetur adipisicing, elit. Temporibus impedit hic nesciunt voluptatibus commodi aliquid, quis sequi doloribus? Nobis amet aut iste assumenda odio atque expedita perferendis repellendus tempora voluptatum.</div>
  <div class="btn_to_up"></div>
</div>

→ Ссылка

licensed under cc by-sa 3.0 with attribution.