Двумя наиболее известными улучшениями Safari на iOS 5 являются поддержка фиксированного позиционирования и прокрутки контента. Из этого туториала вы узнаете, как воспользоваться преимуществами этого изменения и как это повлияет на библиотеки JavaScript с ограниченным доступом, такие как iScroll.
В предыдущем уроке я говорил об iScroll и о том, как этот замечательный маленький плагин помог решить проблему с iOS Webkit (5.0 и ниже) и Android Webkit (2.1 или ниже), в которой не было встроенной поддержки фиксированного позиционирования или областей прокручиваемого контента. ,
Итак, после выходных, проведенных с различными тестами, приятно подтвердить, что обновление iOS 5 Safari теперь решает обе эти проблемы, и у нас теперь есть полная нативная поддержка для них. В течение некоторого времени он находился в стадии разработки с точки зрения бета-версий для iOS 5, но вы никогда не сможете гарантировать, что эти вещи попадут в финальную версию.
В этом уроке я подробно расскажу об этом изменении, а также научу вас, как преобразовать проект iScroll из нашего предыдущего урока в новые свойства CSS.
Что означает это изменение?
Если говорить прямо, то теперь у нас есть возможность создавать веб-приложения с фиксированными верхними и нижними колонтитулами, используя position:fixed а также прокручиваемый контент между ними с помощью -webkit-overflow-scrolling . Это позволяет нам создавать приложения с более естественным интерфейсом без необходимости использования сторонних плагинов, таких как iScroll. Однако, как вы увидите, на данный момент есть еще несколько веских причин полагаться на сторонние библиотеки, такие как iScroll.
Предостережения
Хотя это изменение является отличной новостью для веб-разработчиков, есть несколько предостережений, которые стоит обсудить.
Во-первых, наиболее очевидным является то, что эта функция в настоящее время поддерживается только в Safari 5.1. В то время как новый 4S видел рекордные предварительные заказы, и многие прошлые пользователи уже обновились до iOS 5, вероятно, все еще будет существенное количество пользователей устройств iOS на 5.0 или ниже.
Далее, в настоящее время нет способа удалить полосу прокрутки, которая появляется сбоку от области содержимого. Вы можете попробовать что-то сделать с помощью CSS-метода webkit-scrollbar чтобы изменить цвета и т. Д., Но я не вижу в этом большой проблемы. Полоса прокрутки — это приятный элемент пользовательского интерфейса, который позволяет пользователю узнать, где он находится в документе. Зачем его удалять?
Другая проблема: нет способа определить область «резиновых полос» браузера, так как он будет просто резинкой в самой верхней и нижней части области экрана, включая адресную строку. Я начал работать над JavaScript, чтобы вручную сместить значение scrollTop с обоих концов на 1, но потом обнаружил, что Джо Ламберт уже сделал это с scrollFix.js.
Наконец, импульс прокрутки в настоящее время не имеет контроля скорости. Это было бы более приятно иметь.
Этого достаточно с проблемами, давайте посмотрим, как мы можем начать использовать недавно поддерживаемый CSS!
Шаг 1. Удалить JavaScript
Давайте посмотрим, как преобразовать наш предыдущий проект в новые правила CSS. Мы будем использовать нашу ранее созданную страницу с iScroll для демонстрации.
Первое, что нужно сделать, это убрать JavaScript include и вызов iScroll из нижней части документа, чтобы вы получили простой HTML и CSS файл, как показано ниже:
|
001
002
003
004
005
006
007
008
009
010
011
012
013
014
015
016
017
018
019
020
021
022
023
024
025
026
027
028
029
030
031
032
033
034
035
036
037
038
039
040
041
042
043
044
045
046
047
048
049
050
051
052
053
054
055
056
057
058
059
060
061
062
063
064
065
066
067
068
069
070
071
072
073
074
075
076
077
078
079
080
081
082
083
084
085
086
087
088
089
090
091
092
093
094
095
096
097
098
099
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
|
<!DOCTYPE html>
<html>
<head>
<meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″>
<meta name=»viewport» content=»width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0″>
<meta name=»apple-mobile-web-app-capable» content=»yes» />
<title>Web App Template</title>
<style type=»text/css» media=»all»>
body,ul,li {
padding:0;
margin:0;
border:0;
}
body {
font-family:helvetica;
}
header{
background-color:#deb500;
position:absolute;
z-index:2;
top:0;
width:100%;
height:45px;
padding:0;
}
footer {
background-color:#c27b00;
position:absolute;
z-index:2;
bottom:0;
width:100%;
height:48px;
padding:0;
border-top:1px solid #444;
}
header, footer{
font-size:20px;
text-align:center;
color:#f3f3f3;
font-weight:bold;
text-shadow:0 -1px 0 rgba(0,0,0,0.5);
line-height:45px;
}
#wrapper {
position:absolute;
z-index:1;
top:45px;
width:100%;
background:#aaa;
overflow:auto;
}
#scroll-content {
position:absolute;
z-index:1;
width:100%;
padding:0;
}
ul {
list-style:none;
padding:0;
margin:0;
width:100%;
text-align:left;
}
li {
padding:0 10px;
height:40px;
line-height:40px;
border-bottom:1px solid #ccc;
border-top:1px solid #fff;
background-color:#fafafa;
font-size:14px;
}
</style>
</head>
<body>
<header>
Web App Template
</header>
<div id=»wrapper»>
<div id=»scroll-content»>
<ul>
<li>Some Stuff</li>
<li>More Stuff</li>
<li>Big Stuff</li>
<li>Small Stuff</li>
<li>Geek Stuff</li>
<li>Nerd Stuff</li>
<li>Fast Stuff</li>
<li>Slow Stuff</li>
<li>Good Stuff</li>
<li>Bad Stuff</li>
<li>Your Stuff</li>
<li>My Stuff</li>
<li>Their Stuff</li>
<li>Our Stuff</li>
<li>Super Stuff</li>
<li>Uber Stuff</li>
<li>Stuff Stuff</li>
<li>French Stuff</li>
<li>German Stuff</li>
<li>English Stuff</li>
<li>American Stuff</li>
<li>Stuff</li>
</ul>
</div>
</div>
<footer>
Some Footer Content
</footer>
</body>
</html>
|
Шаг 2. Настройте CSS
Нам вообще не нужно менять наш HTML. Нам просто нужно настроить некоторые из наших CSS и добавить один новый класс.
|
1
|
-webkit-overflow-scrolling : auto;
|
Это новый класс, который был представлен в бета-версии iOS 5, и он дает нам приятную прокрутку. По умолчанию он установлен на auto, что придает скроллингу строгий вид. Чтобы придать области прокрутки более естественный вид, установите для этого свойства значение touch.
|
1
|
-webkit-overflow-scrolling : touch;
|
Теперь примените этот стиль к div содержимым прокрутки, и мы собираемся удалить некоторые из стилей из оболочки, в основном, позиционирование и переполнение. На самом деле нам вообще не нужен div обертка, так что вы можете удалить его, если хотите, но мне нравится иметь div чтобы просто обернуть что-нибудь, если потребуется. Два правила CSS должны выглядеть следующим образом:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
|
#wrapper {
z-index:1;
width:100%;
background:#aaa;
}
#scroll-content {
position:absolute;
top:0;
z-index:1;
width:100%;
padding:0;
-webkit-overflow-scrolling:touch;
overflow:auto;
}
|
Шаг 3. Исправление верхнего и нижнего колонтитула
Раньше у нас был верхний и нижний колонтитулы, установленные на абсолютное значение (поскольку исправление не поддерживалось). Теперь мы можем пойти дальше и расположить их в CSS, используя фиксированное правило, чтобы они не прокручивались на экране.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
|
header{
background-color:#deb500;
position:fixed;
z-index:2;
top:0;
width:100%;
height:45px;
padding:0;
}
footer {
background-color:#c27b00;
position:fixed;
z-index:2;
bottom:0;
width:100%;
height:48px;
padding:0;
border-top:1px solid #444;
}
|
Если вы не знаете разницу между фиксированным позиционированием и абсолютным позиционированием, короткая версия заключается в том, что абсолютное позиционирование — это определенная позиция относительно его родительского элемента. Фиксированное позиционирование — это положение, фиксированное в области просмотра.
Теперь у вас будет область прокрутки с фиксированным верхним и нижним колонтитулами, без использования Javascript!
Будущее
Было бы хорошо, когда другие браузеры играют в догонялки (Windows Phone я смотрю на вас!), И большинство пользователей используют Android OS выше 2.1, но в ближайшем будущем должны появиться некоторые приятные улучшения в браузерах на основе webkit. При увеличении скорости на каждой итерации приложения, созданные с использованием веб-технологий, могут быстро обогнать собственные приложения. Все, что нам нужно сейчас, это больше нативных API
Где это оставить iScroll?
У iScroll еще есть место. Есть много параметров, которые мы можем передать методу прокрутки, чтобы дать некоторые дополнительные опции способу, которым наша прокрутка работает и выглядит, который в настоящее время не может быть достигнут без написания пользовательского JavaScript … так почему бы не использовать то, что уже доступно?
Существует также проблема поддержки браузера. Может быть, вам действительно нужны фиксированные панели инструментов для вашего проекта в старых реализациях браузера webkit. Ну, нет проблем. Если это лучшая вещь для проекта, то не стоит стыдиться использовать одну из существующих библиотек JavaScript для ее достижения. Тем не менее, я бы предложил использовать нативную реализацию всякий раз, когда это возможно.
Выходя за рамки простой функции прокрутки, библиотека iScroll также предлагает несколько отличных дополнительных функций, таких как «Pull To Refresh», «Pinch / Zoom» и «SNAP / Snap to Element». Мы можем рассмотреть их в следующем уроке по iScroll, так как они все еще полезны и актуальны.