Существует несколько плагинов прокручиваемого контента JavaScript, которые можно использовать для создания фиксированного нижнего колонтитула, который не сосет:
Я уверен, что есть еще, но это три, с которыми у меня был некоторый успех.Я решил использовать iScroll лично.
Чтобы получить хороший фиксированный нижний колонтитул, вы можете установить верхний колонтитул на position: absolute и top: 0, установить нижний колонтитул на position: absolute и bottom: 0, а затем установитьобласть содержимого на position: absolute, top: <bottom of header> и bottom: <top of footer>.
Одна проблема, с которой я столкнулся, заключается в том, что установка высоты документа на 100% не позволит прокрутить адресную строку вне поля зрения.,Чтобы это исправить, когда событие load срабатывает на объекте window, я установил высоту документа на 100 пикселей больше высоты экрана (window.innerHeight).Затем я прокручиваю до верхней части страницы ($.mobile.silentScroll(0)) и устанавливаю тайм-аут, чтобы сбросить высоту документа до 100%.
$(window).bind('load', function () {
$.mobile.activePage.css({
height : (window.innerHeight + 100) + 'px',
'min-height' : (window.innerHeight + 100) + 'px'
}).find('[data-role="footer"]').css({
bottom : '100px'
});
$.mobile.silentScroll(0);
setTimeout(function () {
$.mobile.activePage.css({
height : '100%',
'min-height' : '100%'
}).find('[data-role="footer"]').css({
bottom : '0px'
});
if ($.mobile.activePage[0].id in myScroll) {
myScroll[$.mobile.activePage[0].id].refresh();
}
}, 750);
});
Пример выше:
- Изменяет высоту текущей псевдостраницы на 100 пикселей больше, чем высота экрана.
- Изменяет положение нижнего колонтитула, чтобы он оставался на виду для всего процесса.
- Прокруткив верхнюю часть страницы (т.е. прокручивает адресную строку вне поля зрения).
- Устанавливает время ожидания для изменения размера текущей псевдостраницы до 100% и сброса положения нижнего колонтитула.Время ожидания необходимо, чтобы прокрутка могла произойти до того, как высота будет сброшена до 100%.
- Я использовал iScroll в этом коде и сохранил каждый экземпляр iScroll в массиве, чтобы я мог обновлять область содержимого iScroll всякий раз, когда я делализменения в DOM, которые повлияли на размер прокручиваемой области.
Я также запускаю событие загрузки для объекта окна при каждом изменении ориентации:
$(window).bind('orientationchange', function () {
$(window).trigger('load');
});