Как стать автором
Обновить

Комментарии 44

Хм, а у меня не работает Lion-овский «reversed scrolling» с этим. Долго не мог понять почему страница крутится в другую сторону :)

Так же, скролл бар немного великоват по сравнению со стандартным на леве. Должен быть немного тоньше.
Да, лёвский тоньше, но я тут руководствовался рекомендацией, что элементам UI не гоже быть меньше, чем площадь курсора. А с reversed scrolling'а надо бы разобраться. Ещё пунктик в 2do :)
В маке он тонкий, потому что дизайнеры, как мне кажется, руководствовались правилом «есть крутой тачпэд и есть крутая мэджик маус, поэтому скролл можно сделать тоненьким, чисто чтобы ориентироваться в каком месте страницы мы сейчас, а не чтобы кликать по нему».
Есть и тачпед, есть и меджик мауз — на десктопе все круто.
Но на айпеде или еще хуже на айфоне словить иногда скролл невозможно.
Я правильно понимаю, что местоположение скролла показывает пожоление контента в фокусе по отношению ко всей странице?.. Так вот у вас наоборот.

Mac OS X 10.6 Chrome последний
Не очень нравятся требования данного плагина. Есть также jScrollPane с множеством примеров, там же — ссылка на mouse wheel plugin.
Мне тоже не нравятся. Всё-таки, если jQuery используется, то это должно быть плагином. И, собственно, будет.
При всей моей любви к Lion-у, я бы рекомендовал воздержаться от применения такого решения на сайтах. После Snow Leopard-а к Lion-у надо было привыкать от 1 до 3 дней.

Но на сайте:
1) Тратить сутки на привыкание к одному единственному сайту? Да кому это надо?!
2) У обычного взрослого человека будет единственная реакция: «чозанафиг???!» и это явно выходит за рамки того, что вам хотелось бы слышать от пользователя.
3) Пользователь всегда ожидает нативные, привычные, понятные элементы управления. Все эти закосы винды под мак, мака под винду и линукса под и то, и другое выглядят в лучшем случае нелепо.

P.S: нет реакции на клик над полосой скроллбара для пролистывания страницы.
К тому же под самим лайоном это будет работать крайне убого. Хотя бы потому, что у половины пользователей включен прямой скроллинг, у половины обратный. И JS-ом это не выяснить.
Именно это решение вряд ли будет использовано широкой аудиторией. Проект, где эта штука используется предназначен для узкого круга лиц. Насчёт нативных элементов я уже даже не знаю что сказать, поэтому пока без комментариев. А насчёт закосов не совсем понял. Это решения для браузеров, а они, как бы, везде похожи.

P.S.: Записал в 2do.
У меня Chromium 14.

1. Если скроллить колесиком мыши, до упора вниз, то происходит скачок. Будет возможность, попробуйте медленно прокрутить.
2. Если начать скроллинг и убрать курсор с полосы прокрутки, то текст не виден внизу и полоса прокрутки исчезает.
Может все так и должно быть, не знаю, но не удобно.

PS: Данный скроллинг будет не привычен и его польза только в единичных случаях.
У меня воспроизводится второй баг и ещё у меня не работает скрол стрелками вверх-вниз и pageUp-pageDown. Chrome 17.0.942.0
С одной стороны интересная вещь, классно, что вы такое сделали, потратили время, получили опыт. Но, с другой стороны, нужно ли это на сайте?

Было бы неплохо еще учитывать дефолтные настройки пользователя. Инверсивная прокрутка может сбивать с толку.
маке из без всего остального инверсная прокрутка сбивает с толку
Никто не мешает ее выключить в настройках.
Намного проще было бы просто прятать полосу прокрутки и все. Я так сделал на всех страницах с помощью расширения в хроме. Очень доволен. Особенно хорошо на сайтах с темным фоном, где полоса прокрутки сильно выделялась и отвлекала внимание. Появление и пропадание полосы в данном случае ничем не лучше, а возможно даже еще сильнее отвлекает внимание.
Одной из решаемых задач было сохранение ширины контента, вне зависимости от наличия скроллинга. Расширения браузеров не использовали по понятным причинам.
Неудобно, по сравнению со скроллингом GMail.
если вы через chrome то там нативный скроллинг, скролбары кастомизируются css'ом, никаких скриптов
От малейшего прикосновения улетает к чертям. При началае прокрутки полоса должна появляться незамедлительно, а не через пол секунды. К вопросу о размере — попадать мышью в скролбар не нужно, он элемент управления раз в год, в остальное время он индикатор.
может и не должно работать… на всякий случай… но на айпаде не работает
Не должно. Пока во всяком случае.
Такие решения — попытка замены стандартных контролов, как правило порождает много проблем, с которыми можно пытаться бороться долго и безуспешно.

К примеу jScrollPane использовал — в центре странице блок с вертикальным скроллом. сама страница свой скролл собственный имеет. проблема — если при скролле в этом блоке не заблокировать общий скролл — ясно что будет. если же заблокировать — то открыв страницу и если мышка окажется в центре — то долго будешь думать — почему страница не скроллится.

отказался в пользу < 1234 >
Не могу использовать < 1234 > по религиозным соображениям. И даже < Дальше — Больше > не могу. Буду продолжать эксперименты со скроллингом.
Лучше сделать как в Linux Mint, примерно такая же экономия места при меньшем количестве неожиданности:
image
Недавно сталкивался с этой же проблемой.
Нашел вот такой проект iScroll 4.
Непосредственно пример
Да, тоже недавно приходилось пользоваться iscroll.
Задача была чтобы в контейнере была горизонтальная окрутка (для одного фотофолио)

А столкнулся с проблемой, что горизонтальная прокрутка не работает на IOS

В итоге заюзал тогда iscroll, но там нельзя тягать — по старинке, за ползунок

Хорошо было бы чтобы. У вас тоже пояаилась поддержка в будущем мобильных браузеров :)
ну да, есть такое.
Он ориентирован под мобильные устройства.
Пытались заюзать его в нашем проекте, под WP7 не работает совсем.
Кастомизировать скроллбар нужно очень осторожно. Прежде чем начать, стоит пять раз подумать, получится ли у вас сделать лучше чем заложено системно. У вас не получилось скролл всегда работает не в ту сторону: во всех системах это не предусмотренный системно reverse scroll, а на OSX Lion это скролл в прямом направлении, хотя должен работать reverse.
В андройдном браузере не работает.
А возможно ли сделать автоматическую прокрутку при выделении содержимого страницы?
Chrome 15 стабильная ветка, скролл работает очень странно… дерганье и скачки в пределах 20% рабочей области. Скролл осуществлялся жестом (2-а пальца) на тачпаде
Вообще-то, большая глупость делать подобные плагины. Почему? Потому что рассмотрим пример Гугл докс с новым дизайном. Там красивые скругленные линейки сделаны только в Хроме. Почему? потому, что в Хроме они реализуются через CSS, без всякого яваскрипта, подозреваю, гугловцы тупо браузер оптимизируют под свои продукты (вот тебе и честная конкуренция). У гугловцев хватило мозгов понять, что прокрутку страницы нельзя делать на яваскрипте (точнее, они понимают, что плохо что-то менять в ДОМе по событию onscroll, это ломает плавную прокрутку например в Опере), они просто встроили нужный им функционал по внешнему виду линейки в браузер.

Но авторы то об этом не знают, и все пытаются вместо этого написать уродливый тормозящий, плохо работающий в ИЕ, Опере и фаерфоксе костыль на jQuery. Печально. Наглядным глазом видна разница между уровнем и направлением мышления авторов подобных плагинов и разработчиками Гугл.

А ваш, уважаемы автор, пример, даже не поддерживает деградации — без яваскрипта вообще текст не прокрутить. Да горите вы в аду с таким подходом.
Отвечу всем пачкой. +18 за топик, насколько я понимаю, выдано авансом. Спасибо. Это действительно не самый удачный топик и не самый удачный скрипт. Буду реабилитироваться.
Недавно сам делал что то подобное.
>>основная проблема — отработка события onmousewheel

if (navigator.userAgent.indexOf(«Firefox») == -1) {
div.onmousewheel = w;
}else {
div.addEventListener(«DOMMouseScroll», w, false);
}

var w = function (e) {
e = e || window.event;
if (e.wheelDelta) {
var delta = e.wheelDelta / 120;
}else if (e.detail) {
var delta = -e.detail / 3;
}


Если разрабатывать на основе jQuery, то можно не изобретать велосипед и использовать jQuery MouseWheel github.com/brandonaaron/jquery-mousewheel (раньше была страница на plugins.jquery.com/ но сейчас почему-то не найти уже).
а как же возможность скроллить стрелками на клавиатуре? Оо
Этому вроде можно отключить скрытие скроллбара и в итоге выйдет то, что Вам нужно.
А теперь внимание: Antiscroll (по ссылке демка). Выглядит точно как на леве. Поддерживает как reversed scrolling, так и обычный. Fade in/fade out самого скролл бара сделаны на css animations.

Скролл бар как вертикальный, так и горизонтальный. Работает почти везде: IE7+, FF3+, Chrome, Safari.

Вот исходники.
Не работают все стандартные контролы — пробел, вверх/вниз и так далее.

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

Есть рабочее решение, но его нужно выдрать из проекта и причесать (:
Зарегистрируйтесь на Хабре , чтобы оставить комментарий

Публикации

Истории