Javascript.RU

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

Чем заменить 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
Ответить с цитированием
  #2 (permalink)  
Старый 10.08.2021, 13:47
Аватар для voraa
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 2,745

Отредактируйте свой пост - уберите длинную строку.
Ответить с цитированием
  #3 (permalink)  
Старый 10.08.2021, 14:15
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 6,587

getBoundingClientRect работает в safari. Ищи проблему в другом месте.
__________________
29375, 35
Ответить с цитированием
  #4 (permalink)  
Старый 10.08.2021, 14:58
Профессор
Отправить личное сообщение для giwuf Посмотреть профиль Найти все сообщения от giwuf
 
Регистрация: 16.05.2017
Сообщений: 167

Сообщение от voraa Посмотреть сообщение
Отредактируйте свой пост - уберите длинную строку.
voraa, отредактировал
Ответить с цитированием
  #5 (permalink)  
Старый 10.08.2021, 15:02
Профессор
Отправить личное сообщение для giwuf Посмотреть профиль Найти все сообщения от giwuf
 
Регистрация: 16.05.2017
Сообщений: 167

Сообщение от Aetae Посмотреть сообщение
getBoundingClientRect работает в safari. Ищи проблему в другом месте.
Aetae, подскажите тогда в каком. Код перед вами.
Проблема исключительно в айфоне и браузере сафари, в остальном всё работает отлично.
Согласно кодексу версия Safari on iOS 3.2 точно не умела работать с getBoundingClientRect
Ответить с цитированием
  #6 (permalink)  
Старый 10.08.2021, 15:37
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 6,587

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

Последний раз редактировалось Aetae, 10.08.2021 в 15:45.
Ответить с цитированием
  #7 (permalink)  
Старый 10.08.2021, 15:39
Профессор
Отправить личное сообщение для giwuf Посмотреть профиль Найти все сообщения от giwuf
 
Регистрация: 16.05.2017
Сообщений: 167

Сообщение от Aetae Посмотреть сообщение
iOS 3.2 - это первый айфон. На этом раритете много что не будет работать.)
Ок, но в чём тогда причина того, что на 2 подряд попавшихся айфонах, далеко не самых старых, есть проблема с прокруткой вверх до конца и только в сафари?
Ответить с цитированием
  #8 (permalink)  
Старый 10.08.2021, 15:45
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 6,587

По теме хз, нет айфона под рукой, но попробуй выкинуть всю ветку с scrollIntoView и проверить. Я подозреваю стиль такой есть в сафари, но не работает.)
Safari - это новый ie. Он может баговать по сотне причин. Подключайся дебаггером с компа и разбирайся.
__________________
29375, 35
Ответить с цитированием
  #9 (permalink)  
Старый 10.08.2021, 22:16
Аватар для voraa
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 2,745

Сообщение от giwuf
Согласно кодексу версия Safari on iOS 3.2 точно не умела работать с getBoundingClientRect
Как раз с версии 3.2 работает, но по сей день некорректно, т.к. зависит от зума.
Ответить с цитированием
  #10 (permalink)  
Старый 11.08.2021, 08:49
Профессор
Отправить личное сообщение для giwuf Посмотреть профиль Найти все сообщения от giwuf
 
Регистрация: 16.05.2017
Сообщений: 167

Сообщение от Aetae Посмотреть сообщение
getBoundingClientRect работает в safari. Ищи проблему в другом месте.
Так что, Aetae, опираясь на комментарий voraa выше, - вы были не правы, - проблема именно в getBoundingClientRect
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
innerHTML для TR - чем заменить? Непонятливый Общие вопросы Javascript 2 31.10.2012 15:04
IE innerHTML или innerText чем заменить? vitorrio Общие вопросы Javascript 9 07.09.2012 23:47
чем заменить onChange? Viral Элементы интерфейса 13 04.12.2011 11:32
Чем заменить execCommand shtopor Javascript под браузер 9 05.11.2011 16:20
Чем можно заменить свойство contentEditable=true ? iMichaeli7 Javascript под браузер 5 20.10.2010 11:27