Pull to refresh

Comments 54

Пример подвешивает браузер (ff, 20). В хроме бесконечная загрузка чего-то. А статья хорошая, всё понятно расписано!)
Я так глянул быстренько код и меня напрягают моменты на 217 и 255 строчках, скорее всего из-за них и виснет всё.

while (Math.abs(cw.scrollWidth - ct.offsetWidth) <= 1) {
Колесико не срабатывает если навести указатель на скролл-бар. Ничего не происходит если зажать стрелочку вверх или вниз, одиночные клики срабатывают. Также ничего не происходит если нажать на поле, где скользит скролл-бар (элемент с классом scrollar-scroll)
У, непосредственно, скроллбара реализована минимальная реакция на действия пользователя. В статье я старался уделить больше внимания самой прокрутке контента: сохранить то, что предлагает браузер и ос. Я учту Ваши замечания касаемо скроллбаров. Спасибо.

Колесико не срабатывает если навести указатель на скролл-бар.

специфическая штука, но её можно компенсировать сдвинув указатель мыши в сторону контента
UFO just landed and posted this here
Не кастомизируйте скроллбары. Просто не делайте этого. Вы всё равно не обеспечите такую же работу, как у нативных.
Вы это скажите заказчикам
Кастомизация нативного скрола — это лучший компромисс чем его полная подмена, насчет поведения, если не считать стрелочки(ими еще кто-то пользуется, где они есть?), то клик — пролистывание на одну страницу(скрипт из топика не обрабатывает), а DnD даже не знаю как можно сознательно испортить.
Не кастомизируйте скроллбары.

А зачем тогда нужен frontend-программист/верстальщик в штате, если он не может воплощать в жизнь идеи дизайнера?
Разработчики браузеров и стандартов, увы, не предоставляют нормальных средств для кастомизации скроллбаров (есть только платформозависимые), поэтому подобные задачи приходится решать по месту.

Вы всё равно не обеспечите такую же работу, как у нативных.

звучит как вызов)
область прокрутки сохраняет весь нативный функционал браузера, остались только скроллбары…
«звучит как вызов) область прокрутки сохраняет весь нативный функционал браузера, остались только скроллбары…»
А производительность? У вас пустая страница со скролбаром кушает 30% моего процессора.
Win7+Firefox
UFO just landed and posted this here
Вроде как это задача не программиста, а проект-менеджера и разработчика интерфейсов.
звучит как вызов)
область прокрутки сохраняет весь нативный функционал браузера, остались только скроллбары…

Звучит как «вызов принят» :)
В мобильных Хроме и Opera Beta очень тормозно двигается (прокручивается) страница. В Opera Mini не крутится вовсе.
По-моему, кастомизировать скролл — все равно, что кастомизировать меню Файл или кнопку закрытия браузера.
Пара замечаний по OSX-style скроллбарам.

1. Не резиновый скролл.
2. При наведении на скроллбар его ширина не увеличивается.
1. Не резиновый скролл.

можете пояснить?

2. При наведении на скроллбар его ширина не увеличивается.

а разве реализовано не так? (стиль Safari)

на этой странице слева вверху есть возможность переключения стилей
ок, это частный случай. Какая версия OS?
Я тоже под Mac OS работаю, у меня Mac OS 10.8, стилизовал под неё.
Поддерживаю silvansky. Поведение, описанное им, является дефолтным в 10.8 макоси.
10.8.3, скриншоты делал из последней Safari.
На моем маке так (под мышью скроллбар всего лишь темнее):



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

Помнится, Apple эту фичу отдельно выделяли при релизе 10.8. И писали об этом скроллбаре немало разные люди.
Вообще кастомизация системных элементов управления это крайне вредная практика.

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

Так что идеи по поводу кастмизации системных элементов оформления желательно отметать еще на этапе проектирования и ставить дизайнеру в этом плане жесткие ограничения.
Я, делая интерфейсы приложений, не оставляю от стандартных тем Windows ничего, т.е. меняю оболочку 100%-но. И никто пока не жаловался.
Очень непонятно, почему до сих пор в браузерах не предусмотрены как стандарт стили для скроллбаров.
Ключевые слова были как стандарт :)
Слово webkit тут как-бы намекает…
я специально полез и нашел кусок кода из своего проекта примерно 2001 года.
1 BODY{SCROLLBAR-HIGHLIGHT-COLOR:#003333;
2 SCROLLBAR-SHADOW-COLOR:#ffcc33;
3 SCROLLBAR-3DLIGHT-COLOR:#ffcc33;
4 SCROLLBAR-ARROW-COLOR:#ffcc33;
5 SCROLLBAR-DARKSHADOW-COLOR:#006666;
6 SCROLLBAR-BASE-COLOR:#006666;
7 BACKGROUND-COLOR:#006666;
8 COLOR:#000000}

это все уже было. от этого ушли давным давно и слава богу. ))
Чуваки, вы чего? Уже вторая статья с велосипедом за последнюю неделю. На хабре уже писали про baron, который на сегодняшний день всё это умеет и реализован проще некуда.
У baron-а есть небольшой недостаток — для работы горизонтального скролла необходимо указывать высоту, будь она в пикселях или в процентах, но быть должна. И, к сожалению, статью до сих пор не обновили, что барон поддерживает и горизонтальный скролл. Также нет контролов — а тут есть их реализация, пусть и минимальная.

Насчёт велосипедов — почему бы и нет, если делается какое-то новое решение? Ведь, как говорится, в споре рождается истина. Видимо в последнее время заказчики стали больше просить делать кастомные скроллбары, и существующие решения не подходили, оттуда и велосипеды.
Искал, но не смог найти. Не подскажете, где можно увидеть?
Простите, обманул. Кнопочек вниз/вверх действительно нет.
С другой стороны, не могу вспомнить чтобы в последнее время их где-то встречал, они ведь неудобные и ими никто не пользуется — для чего их добавлять в интерфейс?
Собственно, кастомные скроллбары — это пожелание заказчика или требование дизайна. И если в дизайне есть кнопочки, то функционал придётся допиливать вручную, разбираясь в чужом коде — не слишком приятная перспектива, не правда ли?

Помимо этого есть и другие события: скролл мыши над скроллбаром и клики на подложке скроллбара для более быстрой перемотки.
Верно. Но это следствие неправильного подхода в принципе. Плохо когда дизайн и вопросы юзабилити не обсуждаются.
Хм, надо подумать. Не приходил в голову кейс когда высота определяется содержимым.

Теоретически, то же самое можно сказать про ширину.
Самое распространенное применение это маленькие окна, такие как Чат в Google+, а так же они его используют в почте. Или например всплывающие сообщения в VK. Вообще любые окна малого размера, где дефолтный скролл смотрится ужасно громоздко.
Например для онлайн-игр, вот тыкните тут на вкладку «Существа» (там кастомный скролл), а затем на вкладку «Летопись» (там кастомный селект). Как по мне там стандартные браузерные контролы смотрелись бы ужасно.

Опять же если дизайнер задумал на сайте тёмную тему, то белые скроллбары и поля формы будут там смотреться чужеродными.
Скажем, для различных веб-интерфейсов, где дизайн предполагает футуристичность. Странно будет на фоне таких кнопок и панелей выглядеть стандартный скорл, вам не кажется? Никто не говорит о том, что нужно в каждом приложении заменять скрол, но есть частные задачи где это делать необходимо
У меня через некоторое время скролл начинает подвешивать браузер Хром (Windows 7 x64, Google Chrome 26).

Функция апдейта, которая заниматся проверкой изменения размера, должна совершать минимальное количество действий, иначе даже при небольшом количестве скроллов на странице, загрузка процессора будет очень большой.

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

И, конечно же, 5 вложенных див-ов — это, имхо, нехорошо.

А так, описание задумки хорошое, постарался.
UFO just landed and posted this here
Ребята, есть проверенное решение github.com/Diokuz/baron которым пользуется несколько миллионов человек в месяц.

Если там чего-то не хватает, что-то не работает — пишите ишью, или пишите мне любыми доступными средставми коммуникации — я с радостью поправлю.

Контролы сделаю в ближайшее время.
OH SHI~

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

С того момента моё убеждение о недопустимости вмешательства в интерфейс надсистемы — браузера — только укрепилось.
Дело не в убеждении, а в потребности: игры, новые тренды в дизайне, отсутствие нативной возможности кастомизации в браузере и т.д.

Так что нужно знать и уметь кастомизировать (~решать нестандартные задачи), а не сидеть, забившись в угол от страха, укрепляя свои убеждения… (признаться, уже достали комментаторы, которые ссут что-либо реализовывать, ссылаясь на псевдо-мудрость и чушь)

Помимо Вашей статьи, на хабре есть еще минимум 3 (вместе с моей), в которых обсуждается решение задачи по кастомизации скролбаров. Также можно посмотреть исходники vkontakte и facebook, они также УЖЕ решили эту задачу.

Вы не побоялись кастомизировать браузерные скроллбары, и даже написали об этом статью. Так что лучше еще раз посмотрите на свое решение и выявите те места, в которых допустили ошибку или где не получилось достичь нужного результата. Еще раз их проработайте. Это вполне решаемая задача.

Пока есть потребность — будет спрос. Есть спрос — будут деньги. Есть деньги — есть новая машина, комп, квартира, отдых и т.д.

С профессионалами сейчас реально голяк… Так что не останавливайтесь на достигнутом.
О, я тоже писал библиотеку для кастомизации скролла (сторонняя tinyscrollbar.js не устраивала хотя бы тем, что jQuery требовала для работы).
Sign up to leave a comment.

Articles