Я имею два блока с высотой 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
?
Виртуальный выделенный сервер (VDS) становится отличным выбором
Как сделать мигающую кнопку на сайте? В начале страницы "получить доступ навсегда"
Как изменить тег в представлениях views , хочу изменить тег заголовка на с на ? в каком файле это редактировать? не могу найти код где это можно...
Есть два блока(fixed)Как сделать так, чтоб они шли друг за другом(адаптив), они ж не relative?)
Нужно на странице budovaorg применять такой код В firefox всё прекрасно работает, а вот хром не хочет