Вертикальный скроллинг содержимого страницы в стиле Mac OS X Lion

    Добрый день, Хабр!

    Не так давно я оставлял весьма категоричный комментарий в топике о модернизации скроллбаров а, буквально, через пару дней был вынужден сам решать задачу о его (скроллбара) модернизации. Так уж сложились звёзды, что в пользовательском интерфейсе одного из проектов стандартной полосе прокрутки место было найти можно, но крайне нежелательно. Из всех возможных вариантов было выбрано нечто среднее между скроллбаром нового Gmail'а, благо задачи похожи и Mac OS X Lion, потому что «ох, они круты ». Я вооружился js и jQuery, и на свет было произведено это.

    image

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

    Для работы требует: jQuery и компоненту jQuery UI — draggable, а так же любой нормальный браузер (в IE8- работать, увы, не будет).

    Проблемы не решённые в текущей версии: некорректная отработка при изменении масштаба текста.

    В планах: избавиться от описанного в предыдущем пункте и от draggable, оформить в виде плагина jQuery, добиться работы в IE8- (основная проблема — отработка события onmousewheel), добавить функционал горбуновского инфоскроллера.

    Ссылка на рабочий пример
    Код, включение, стили и развешивание функций по событиям — в исходнике.

    За сим, надеюсь, что этот очерк лишним не будет.
    AdBlock has stolen the banner, but banners are not teeth — they will be back

    More
    Ads

    Comments 44

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

                                              А ваш, уважаемы автор, пример, даже не поддерживает деградации — без яваскрипта вообще текст не прокрутить. Да горите вы в аду с таким подходом.
                                                +2
                                                Отвечу всем пачкой. +18 за топик, насколько я понимаю, выдано авансом. Спасибо. Это действительно не самый удачный топик и не самый удачный скрипт. Буду реабилитироваться.
                                                  0
                                                  Недавно сам делал что то подобное.
                                                  >>основная проблема — отработка события 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;
                                                  }


                                                    0
                                                    Если разрабатывать на основе jQuery, то можно не изобретать велосипед и использовать jQuery MouseWheel github.com/brandonaaron/jquery-mousewheel (раньше была страница на plugins.jquery.com/ но сейчас почему-то не найти уже).
                                                    0
                                                    а как же возможность скроллить стрелками на клавиатуре? Оо
                                                      0
                                                      Я недавно искал подобное и нашел плагин iScroll. Вроде хорошо работает:
                                                      Ссылка: cubiq.org/iscroll-4
                                                      Демо: cubiq.org/dropbox/iscroll4/examples/simple/
                                                        0
                                                        Ах да, я даже еще лучше плагин находил, называется OverScroll www.azoffdesign.com/overscroll
                                                          0
                                                          Этому вроде можно отключить скрытие скроллбара и в итоге выйдет то, что Вам нужно.
                                                          0
                                                          А теперь внимание: Antiscroll (по ссылке демка). Выглядит точно как на леве. Поддерживает как reversed scrolling, так и обычный. Fade in/fade out самого скролл бара сделаны на css animations.

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

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

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

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

                                                              Only users with full accounts can post comments. Log in, please.