Javascript-форум (https://javascript.ru/forum/)
-   Javascript под браузер (https://javascript.ru/forum/css-html/)
-   -   Чем заменить getBoundingClientRect на iPhone Mobile Safari? (https://javascript.ru/forum/css-html/82945-chem-zamenit-getboundingclientrect-na-iphone-mobile-safari.html)

giwuf 10.08.2021 11:59

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

voraa 10.08.2021 13:47

Отредактируйте свой пост - уберите длинную строку.

Aetae 10.08.2021 14:15

getBoundingClientRect работает в safari. Ищи проблему в другом месте.

giwuf 10.08.2021 14:58

Цитата:

Сообщение от voraa (Сообщение 539305)
Отредактируйте свой пост - уберите длинную строку.

voraa, отредактировал

giwuf 10.08.2021 15:02

Цитата:

Сообщение от Aetae (Сообщение 539310)
getBoundingClientRect работает в safari. Ищи проблему в другом месте.

Aetae, подскажите тогда в каком. Код перед вами.
Проблема исключительно в айфоне и браузере сафари, в остальном всё работает отлично.
Согласно кодексу версия Safari on iOS 3.2 точно не умела работать с getBoundingClientRect

Aetae 10.08.2021 15:37

iOS 3.2 - это первый айфон. На этом раритете много что не будет работать.)

giwuf 10.08.2021 15:39

Цитата:

Сообщение от Aetae (Сообщение 539316)
iOS 3.2 - это первый айфон. На этом раритете много что не будет работать.)

Ок, но в чём тогда причина того, что на 2 подряд попавшихся айфонах, далеко не самых старых, есть проблема с прокруткой вверх до конца и только в сафари?

Aetae 10.08.2021 15:45

По теме хз, нет айфона под рукой, но попробуй выкинуть всю ветку с scrollIntoView и проверить. Я подозреваю стиль такой есть в сафари, но не работает.)
Safari - это новый ie. Он может баговать по сотне причин. Подключайся дебаггером с компа и разбирайся.

voraa 10.08.2021 22:16

Цитата:

Сообщение от giwuf
Согласно кодексу версия Safari on iOS 3.2 точно не умела работать с getBoundingClientRect

Как раз с версии 3.2 работает, но по сей день некорректно, т.к. зависит от зума.

giwuf 11.08.2021 08:49

Цитата:

Сообщение от Aetae (Сообщение 539310)
getBoundingClientRect работает в safari. Ищи проблему в другом месте.

Так что, Aetae, опираясь на комментарий voraa выше, - вы были не правы, - проблема именно в getBoundingClientRect


Часовой пояс GMT +3, время: 14:48.