Есть блок с текстом и кнопка, которая ведёт наверх экрана и которая появляется по мере прокручивания текста вниз.
Везде отрабатывает хорошо за исключением 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>
safari ios 3.2
и меня интересует, как можно этот вопрос решить. Уже 2 человека с не самыми старыми айфонами сообщили, что только в сафари у них стрелка не докручивает до верхаios 3
вышел десять лет назад, но если нужно это поддерживать, то можете попробовать offsetTop + scrollTopeAmt
при прокрутке будет округляться до целого числа и терять дробную часть, и поэтому прокрутка не будет доходить до конца на несколько пикселей — вероятно, это и является причиной ваших проблем на iOS, а функция getBoundingClientRect на самом деле тут вообще ни при чём