Я имею два блока с высотой 100vh - это header и выплывающее меню .menu
В мобильный браузерах при скролле в этих блоках возникает некрасивый 'скачок' из за того что скрывается панель навигации браузера.
Для решения проблемы я добавил вот такой JS код который задает элементам фиксированную высоту равную высоте содержимого, вот код:
function Vh() {
var that = this;
this.detectDevice = function() {
if ("ontouchstart" in document.documentElement) {
document.body.classList.add('touch-device');
} else {
document.body.classList.add('hover-device');
}
}
this.setHeight = function(elem) {
if (document.body.classList.contains('touch-device')) {
function calculateHeight() {
var element = document.querySelector(elem);
var height = document.documentElement.clientHeight;
var result = element.style.height = height + 'px';
return result;
}
(function(){
calculateHeight();
window.addEventListener('orientationchange', function() {
setTimeout(function() {
calculateHeight();
}, 500);
});
}());
}
}
}
Все это отлично работает для Header но не рабоает для .menu,
(из за display: none я думаю)
Css на всякий случай:
header {
height: 100vh;
background-image: url(images/100-01.png);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
color: white;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: center;
padding: 25px 20px 30px 20px;
}
.menu {
width: 100%;
height: 100vh;
position: fixed;
background-color: white;
display: none;
z-index: 1000;
}
И тогда я решил повесить вот такой обработчик:
this.scrolled = function () {
window.addEventListener('touchend', function(){
that.setHeight('.menu');
console.log('work');
});
}
Да, наверное не лучшее решение но даже оно не работает в Safari (пробовал на iphone) когда на стандартном браузере Android все работает!
Вопрос заключается в надобности использования сего обработчика и если ДА то как заставить Safari отследить touchend ?
Апостиль в Лос-Анджелесе без лишних нервов и бумажной волокиты
Основные этапы разработки сайта для стоматологической клиники
Продвижение своими сайтами как стратегия роста и независимости