Событие 'touchend' не работает в Safari на ios

186
16 марта 2018, 12:05

Я имею два блока с высотой 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 ?

READ ALSO
Как сделать мигающую кнопку на сайте

Как сделать мигающую кнопку на сайте

Как сделать мигающую кнопку на сайте? В начале страницы "получить доступ навсегда"

308
Как изменить тег views с h4 на p Drupal?

Как изменить тег views с h4 на p Drupal?

Как изменить тег в представлениях views , хочу изменить тег заголовка на с на ? в каком файле это редактировать? не могу найти код где это можно...

250
two fixed div(два фиксированых блока)

two fixed div(два фиксированых блока)

Есть два блока(fixed)Как сделать так, чтоб они шли друг за другом(адаптив), они ж не relative?)

186
Медиа запрос не работает в Chrome

Медиа запрос не работает в Chrome

Нужно на странице budovaorg применять такой код В firefox всё прекрасно работает, а вот хром не хочет

218