Показать сообщение отдельно
  #1 (permalink)  
Старый 10.08.2021, 11:59
Профессор
Отправить личное сообщение для giwuf Посмотреть профиль Найти все сообщения от giwuf
 
Регистрация: 16.05.2017
Сообщений: 165

Чем заменить 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: blue;
  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>

Последний раз редактировалось giwuf, 10.08.2021 в 14:57. Причина: заменил background
Ответить с цитированием