Есть ли способ получить кроссплатформенное переполнение: scroll

Question

В настоящее время я работаю над сайтом, который предназначен для работы как на мобильных устройствах, так и на обычных компьютерах.Проблема, с которой я сталкиваюсь, связана с тем, что мне нужны заголовок и нижний колонтитул с фиксированными позициями.

Первое, что я попробовал, что мне показалось наиболее естественным, было использование позиции.:фиксированный.Он очень хорошо работал на моем ПК, но не работал на моем iphone (с ios4).Так что я немного погуглил и нашел iScroll. iScroll - это отдельный скрипт JavaScript, предназначенный для решения именно этой проблемы.Проблема в том, что это решение ломает функцию на немобильной платформе.Я также посмотрел на YUI ScrollView , но опять-таки он был сломан на немобильной платформе.

В настоящее время я решил эту проблему с помощью iScroll только при обнаружении мобильного браузера.Но я ищу более чистое и лучшее решение.

Примечание: iScroll4 не поддерживает ie, то есть то, что я тоже хочу поддерживать.

Answer 1

К сожалению, нет чистого решения - вы можете попробовать обнаружить «сенсорные события», поскольку они в значительной степени сообщают вам, когда пользователю потребуется iScroll , и запускают его.

Простой способ обнаружения сенсорных событий заключается в следующем:

    var $q = something...;
    try {
        document.createEvent("TouchEvent");
        $q.onmousedown = 'ontouchstart',
        $q.onmouseup = 'ontouchend',
        $q.onmousemove = 'ontouchmove';
        $q.touches = true; //used in other modules as well

        //position based on first-finger position
        $q.getPageX = function(e){
            return e.touches[0].pageX;
        };
        $q.getPageY = function(e){
            return e.touches[0].pageY;
        };

} catch (e) {
        //KEY BASED DEVICE
        $q.onmousedown = 'onmousedown',
        $q.onmouseup = 'onmouseup',
        $q.onmousemove = 'onmousemove';
        $q.touches = false;

        //grabbing the position based on Mouse position
        $q.getPageX = function(e){
            return e.clientX;
        };
        $q.getPageY = function(e){
            return e.clientY;
        };
 }