I Just Take My Finger… and iScroll

Стандартный скроллбар — уродливая штука, занимающая место. На сайтах, где на некоторых страницах прокрутка есть, а на некоторых — нет, прыгает вёрстка по горизонтали при переходе со страницы на страницу (в IE эта проблема «элегантно» решается постоянным отображением полосы прокрутки, даже когда она не нужна).

У меня уже сто лет в Опере полосы прокрутки выключены вообще — с тех пор, как я нашёл, что их можно выключить. Крутить страницу всё равно удобнее колесом.

Нажмите Ctrl+F7 прямо сейчас и забудьте про стандартные полосы прокрутки.

Неприятно бывает только, когда читаешь какой-то длинный текст и не понимаешь, в какой его части находишься. В этом случае приходится включать скроллбар.

На iPhone прокрутка производится пальцем.

Well, how do I scroll through my list of artists? How do I do this? I just take my finger… and I scroll.

Стив Джобс на Macworld 2007

Страничка просто подталкивается в нужную сторону. Стало быть, сами полоски нужны только для отображения текущего положения на странице, а вовсе не для управления им.

Полосы прокрутки на iPhone

Они очень красивые, и глупо не воспользоваться возможностью сделать себе такие в Опере. Такие скроллбары мы назовём iScroll и выпустим в виде UserJS.

You know… I was showing it to somebody. I was giving a demo to somebody a little while ago, who’d never seen this before inside Apple, and I finished the demo and said «What do you think?» He told me this, he said: «You had me at scrolling»

Стив Джобс на Macworld 2007

You had me at scrolling

Конечно, главный кайф айфоновского скроллинга в том, что там это делается пальцем. Но и колесо на мышке неплохо справляется с тем, чтобы прокрутка была «на уровне чувств». Осталось только нарисовать правильный визуальный фидбек.

iScroll — скрипт для Оперы, позволяющий заменить стандартные полосы прокрутки такими, как на iPhone.

Пока что это бета-версия; возможно, что всплывут какие-нибудь проблемы. Хотя у меня уже сутки работает прекрасно (и я иногда кручу страницы туда-сюда просто ради удовольствия).

Если вы не умеете устанавливаеть UserJS, можете научиться самостоятельно, а можете дождаться, пока я сделаю нормальную страничку про iScroll.

Чтобы просто посмотреть, как это выглядит, откройте тестовую страничку, ещё раз убедившись, что стандартные скроллбары у вас выключены (потому, что когда есть и то, и другое, выглядит страшно). И не удивляйтесь, что это работает только под Оперой: это ведь скрипт для Оперы!

Дальше
43 комментария
Spectator 2007

Scrolling Will Never Be The Same.

Егор 2007

не стоит делать индикатор абсолютно белым или абсолютно черным, а то есть яркие или тёмные сайты, но с белыми полосами по бокам, получается тогда белый скролл на белом фоне

заменил цвета на #333 и #aaa, хотя каждый может подобрать под себя

и еще одно, при прокрутке колесом двигается индикатор нормально, когда прокручиваешь нажав среднюю клавишу мыши, двигая мышью вверх/вниз, то индикатор движется рывками.

опера 9.20

Илья Бирман 2007

Там цвет определяется исходя из computedStyle’а элемента body. Если у него среднее по RGB меньше 128, то рисуется белый, иначе чёрный. Это не очень надёжное решение, но лучше я придумать не могу.

Круто было бы определить как-нибудь реальные цвета пикселей под полоской и нарисовать её правильным цветом. Или вообще методом xor нарисовать. Подозреваю, что canvas тут может помочь, но минут 10 я с ним поэкспериментировал и не нашёл решения, поэтому плюнул.

Про прокрутку с нажатой средней кнопкой знаю; не думаю, что я могу с этим что-то сделать.

Andrew 2007

А почему не сделать скроллбар уезжающий за границу экрана? Он всплывает либо когда мы скроллим чем-то иным — клавой, мышью, пальцем (тьфу-тьфу-тьфу!), — либо когда курсор подползает к правой (левой?) границе экрана. Ведь только бар позволяет прыгать по странице вниз/вверх намного сильнее, чем любой другой способ. Причём, как ещё большее удобство, при скроллинге чем-то иным, он может выползать не целиком, а на n-пикселей. А при вылезании бар должен «нависать» над страницей, чтоб разметка не плыла.

Минус вашего варианта в том, что узнать где мы находимся можно только при скролллинге, что не есть гуд.

Илья Бирман 2007

Это есть гуд. Вы ведь в то место, где вы находитесь, как-то попали.

Егор 2007

если его делать xor’ом, то он может начать мигать цветами при прокрутке, будет отвлекать

Илья Бирман 2007

Да, пожалуй. Ну хотя бы getPixel () сделать в правом верхнем углу реальный, и от него плясать уже.

Andrew 2007

Как узнать, где я, не прикасаясь к клавиатуре, мыши или экрану пальцем (тьфу-тьфу-тьфу!)? Никак. Я готов пожертвовать двумя-тремя пикселями (в предложенный мною выше вариант стоит добавить функцию «постоянно показывать n-пикселей»), что бы эта информация всегда была видна.

Pure_BY 2007

Очень хорошая идея, и оформление, но минус в том, что по странице таким образом невозможно быстро передвигаться (если примерно помнишь, в какой часте длинной страницы находиться нужный тебе кусок текста). Знаю, что на клавиатуре есть клавиши Home и End, но что делать, если текст очень длинный, а нужно резко переключиться с середины на, скажем, ¼?

Я был бы очень доволен, еслибы стандартный оперский скроллбар можно было бы утончить до 3—4 пикселей. Но боюсь, это технически невозможно.

Илья Бирман 2007

Такая возможность может понадобиться раз в году, а может и не понадобиться. Нажать Ctrl+F7 в этом случае не сложно. Стандартный скроллбар утончить до 3-4 пикселей нельзя (можно только во всей системе), но можно написать скрипт, который будет отображать такой скроллбар, как вам нужно.

Pure_BY 2007

&# 188; должно было из себя представлять одну четвёртую (1/4)

Илья Бирман 2007

Представлять собой.

Вовсе не должно. Тут не работает никакой HTML ;-)

Олег Андреев 2007

Илья, you had me at scrolling!

Илья Бирман 2007

:-)

Олег Андреев 2007

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

Олег Андреев 2007

вот так:

// document.iScrollbars.updateScrollbars ()

(Илья, последний коммент улетел не до конца написанным)

Илья Бирман 2007

Не, пускай будет - это позволяет сразу оценить объём документа. Если мешает, каждый может закомментировать :-)

frst 2007

Поставил, попробую. Но имхуется что вернусь к обычному скроллбару. Более всего напрягает тормозность. Всетаки js.

Олег Андреев, оно там специально ведь сделано, чтобы можно было узнать вся ли страница видна или есть что-то «под сгибом».

Илья Бирман 2007

У меня работает совершенно гладко, я даже сам удивился. Если тормозит, то, естественно, оно нафиг не нужно :-)

Олег Андреев 2007

Вы про «под сгибом» всерьёз? Я не имбецил, о которых заботятся маркетологи, заставляя дизайнера впихнуть стартовую страницу в первый экран.

Илья Бирман 2007

Вопрос не том, чтобы определить, что там «что-то есть», а в том, ещё раз, чтобы понять, сколько этого.

Олег Андреев 2007

Каждый раз при открытии окна оценивать объем? Я пришел почитать статью, а мне будет «полезно узнать» сколько там внизу этой статьи? Узнаю, если очень захочу, коснувшись колеса мыши (кстати, трещётку из него выкинул, поэтому совсем легко крутить).

Нет, я, конечно, понимаю, что эта штука офигенно развлекательная, но всему есть разумные пределы :-)

Илья Бирман 2007

Как раз чтобы не развлекаться лишний раз есть verThresh, у меня он вообще равен трём.

Олег Андреев 2007

verTresh видел, это хорошо. Но Илья, как ты не понимаешь. Мне дали ссылку на (длинную) статью «Как быть богатым, здоровым и счастливым», я её открываю, собираюсь найти заголовок статьи чтобы начать чтение и... мне в глаз светит хрень (не хуже анимированного баннера) из совсем нерелевантного места. Если бы этот скроллер не мигал, этой проблемы не было.

Илья Бирман 2007

Олег, хрень светит меньше секунды. Это можно убрать. Мне кажется, что лучше, когда это есть. О чём спор?

AG 2007

Для Pure_BY, может и другим будет интересно.

Стандартный Оперовский скроллбар легко можно сделать любой ширины, для этого заходим с свойства экрана, вкладка «Оформление», кнопка «Дополнительно», там тыкаем в скроллбар и указываем точную ширину в пикселах.

Работает для всех программ.

Алексас 2007

Илья, а как мне сделать так, что бы при создании нового таба стандартный скроллер был отключен де-факто?

Илья Бирман 2007

Полагаю, отключить скроллабр в настройках (Tools, Preferences, Advanced, Browsing, Show scroll bars). Кстати, smooth scrolling стоит отключить, если он вдруг включен.

Алексас 2007

Кстати в моем не самом бюджетном ноутбуке годовалой давности при использовании айскола в gmail это дело начинает немного тормозить.

Евгений Геращенко 2007

Спасибо, полезная штука!

Кстати, а то, как убрать полосу прокрутки в Опере, я думаю, стоит вынести в сам пост. Потому что лично я не сразу нашел.

Олег Горбунов 2007

Илья, you make me happy! Вы один из немногих, не пересевших еще на Ubuntu и иже с ними, и радуете простых сельских парней вроде меня разными вкусными штуками, такими как iScroll и типографская раскладка. (-;

BOLK 2007

Илья, а как оценить размер статьи, когда я только-только зашёл на страницу? У меня есть два предложения:

1) показывать scroll на onfocus
2) показывать scroll до загрузки (до наступления события onload)

Илья Бирман 2007

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

BOLK 2007

Ты попробуй для начала, может не взорвётся? :)

frst 2007

Еще есть такая штука. Когда страница очень большая по вертикали (книжка например) — индикатор шибко мелкий, сложно его вообще заметить. Надо сделать минимальную высоту.

Илья Бирман 2007

Ага, думал об этом.

Олег Горбунов 2007

!!Проблема в том, что я не очень понимаю, как можно в строящийся DOM влезать со своими дивами, чтобы у браузера при этом не взорвался мозг.!!
Теоретически, насколько я знаю, это должно было быть нормальным явлением.

aerate 2007

Можно средствами css спрятать стандартный скроллинг, а потом рисовать все, что душе угодно. Правда есть вопрос непривычности такового новоявленного элемента для пользователя.

BOLK 2007

В общем, Илья, здорово, если довести до ума :)

van Rijn 2007

Opera 8.x не поддерживается, насколько я понимаю?
Точнее, полоска рисуется, но работает очень уж криво.

Илья Бирман 2007

Ну, видимо, нет. У меня девятая.

Алексас 2007

Заметил что если открываешь ссылку в новом табе не через шифт, а через html код страницы, т. е. не сознательно то таб открывается вместе со скроллбаром. Так же скроллбар от оперы появляется при переходе из яндекс-ленты. В настройках разумеется все выключено. Это только у меня такая проблема?

Opera 9.2

Карпинский Александр aka homm 2007

Кстати, ты говоришь «Кстати, smooth scrolling стоит отключить, если он вдруг включен.»
а еше говоришь Всё это в первую очередь удобно и естественно, а потом уже «красивости» Как понять? Я оставил плавную прокрутку, пусть лучше скролбар подтормаживает. А при нажатой средней кнопки он у меня наоборот очень плавно работает :)

Илья Бирман 2007

Smooth scrolling плохо реализован и всегда работает медленно. Он создает впечатление, что прокрутка страницы требует каких-то усилий, что страница сопротивляется. При выключенной «плавной прокрутке» страница крутится значительно плавнее.

Карпинский Александр aka homm 2007

Вот здесь скролбар глючит.

Никита Васильев 2007

У меня iScroll не прижился по следующим причинам:

  • он не показывает гдя я нахожусь без лишних телодвижений;
  • отвлекает внимание больше чем стандартный скроллбар из-за того, что он то всплывает, то исчезает;
  • немного подтормаживает.

Я бы хотел чтобы скроллбар в браузере был

  • без стрелочек и находился поверх страницы (как у вас);
  • не скрывался (как стандартный).
    Я бы хотел такой скроллбар.
cleanest 2007

восторг, восторг)

Megakazbek 2007

Я после нескольких дней использования данного скрипта заметил, что меня совершенно не интересует, в каком месте страницы я нахожусь в данный момент, а скроллбар я использую, и очень часто, для того, чтобы мгновенно перенестись к нужной части длинного текста. Например, на этой странице с комментариями задолбаешься скроллировать снизу от форму ввода текста наверх до собственно поста. Поэтому, ИМХО, было бы лучше, если бы этот скроллбар появлялся при приближении курсора к правому краю окна и работал бы как обычный скроллбар (не знаю, правда, можно ли такое сделать на javascript’е). В общем, после где-то пятидесятого инстинктивного движения мышью к правому краю экрана и дальнейшему осознанию того, что скроллбара там нету и что всю длиннющую страницу придется утомительно прокручивать вручную, снес этот скрипт и вернулся к обычному скроллбару.

Илья Бирман 2007

Если вы используете скроллбар для прокрутки страницы, то iScroll вам, естественно, ни к чему.

Егор 2007

две магические кнопки «home» и «end» решат вашу проблему с прокручиванием в пределы страницы, если вам нужен обычный скролл, никто не насаживает вам iscroll. iScroll удобен тем, кто не пользуется скроллом для навигации по странице, но кому полезно будет знать текущее своё расположение на ней, или визуально увидеть количество оставшегося материала.

Илья Бирман 2007

Эту простую мысль почему-то массово игнорируют люди, а потом говорят, что им неудобно.

Денис Талала 2007

Классно было бы, если бы еще этот скролл прокручивался плавно, а не рывками. Но все равно супер. Теперь тоже так буду. )

Megakazbek 2007

Home и End во-первых, к сожалению, находятся на клавиатуре, а во-вторых, с их помощью нельзя переместиться на середину страницы, а конкретно в начало/конец перемещаться требуется совсем не так часто. Эти две простые мысли тоже почему-то некоторыми людьми игнорируются :). То, что мне никто не насаживает iScroll, мне прекрасно известно. Однако почему бы не сообщить автору о том, чем можно было бы этот iScroll улучшить? Мне в нем все очень нравится, кроме того, что этот скроллбар не работает, как скроллбар :)

Siberex 2007

Имхо, идея такого же скроллбара, который появлялся бы при упоре в правый край и *умел управлять* страницей, более чем хороша. Предлагаю сделать jScroll ;-)
Кстати, мне гораздо удобней, когда плавная прокрутка включена — чувства заторможенности нет, а вот когда плавность отключена, есть ощущение потери текста :-(

Олег Андреев 2007

Предлагаю все умные и не очень идеи об «идеальной полосе прокрутке» высказывать на веб-два-нулевом сайте YouScroll.com

Олег Андреев 2007

*прокрутки

Олег Андреев 2007

Ого! Илья даже горизонтальный скроллинг сделал!

Илья Бирман 2007

Фантастика! :-)

Он нужен, чтобы смотреть, когда вёрстка разваливается вдруг (horThresh равен единице поэтому).

Денис Талала 2007

Где горизонтальный скроллинг? У меня не работает почему-то. (

Phenix_H_K 2007

Идея очень хорошая!
Илья, а может выступить с предложением Оперовцам?

Саня Стекольщиков 2007

Хм. А как можно сделать его инверсным? Чтобы на белом — чёрное, а на чёрном — белое? Потому что, когда я смотрел страницу «Ай-Скролла» у тебя на сайте, на белом фоне отлично всё, но при прокрутке — исчезает на фоне вставки с фотографией iPhone.

profiT 2007

Так как скрипт изначально не работает в Опере 8-й и о совместимости с ней можно не болеть, то можно улучшить работу скрипта применив событие DOMContentLoaded вместо обычного ’load’ который ждёт загрузки всей страницы и всех файлов страницы.

Плюс ещё у меня были конфликты с другими скриптами которые решаются, добавив в начало функции отключение скрипта на страницах работающими с или заданных через data:URI:

if(document.location.href.match(/^data:/))return;

или:

if(document.location.href.match(/^data:(\w+\/[\w-]+);/))return;

Илья Бирман 2007

Спасибо за совет, попробую этим воспользоваться!

Мои книги