Форумы портала PHP.SU » » Хранилище функций на JavaScript » Плагин jQuery.capScroll

Страниц (8): [1] 2 3 4 5 6 7 8 »
 

1. armancho7777777 - 23 Июня, 2013 - 12:19:52 - перейти к сообщению
Всем привет!
Представляю очередной мини плагин jQuery - capScroll.
Предпосылкой послужило то, что браузер прокручивает документ дальше после того
как целевой прокручиваемый HTML - элемент достигает максимальной точки прокрутки,
как например в случае со спойлерами на нашем форуме.
Данный плагин позволяет захватывать скролл и фокусировать его на целевом объекте,
с css правилом overflow == auto, блокируя скролл родительского элемента.
Тот же фунционал получают и дочерние блочные и строчно-блочные элементы,
с соответсвующим ccs правилом overflow.

Пример работы можно посмотреть тут.

В примере по ссылке плагин подключен глобально,
к основному контейнеру документа,
чтобы показать его на деле полностью, так сказать во всей красе )

Метод обёртки capScroll() может принимать необязательный объект параметров, описанных ниже в комментариях к коду.
Ну и, соответственно, реализован метод обёртки unCapScroll() для отсоединения захвата.

CODE (javascript):
скопировать код в буфер обмена
  1.  
  2. elements.capScroll({
  3.  
  4.           duration : 300,  // Скорость прокрутки. По умолчанию 300мс.
  5.          
  6.           easing   : 'linear', /* Тип наращивания анимации.
  7.                                   По умолчанию 'linear'. Может быть 'swing'.
  8.                                   Хотите больше, подключайте jqurey.easingPlugin */
  9.                                                          
  10.           step     : function(now, obj){}, /* Шаги анимации. Подробнее в документации
  11.                                              jQuery по работе с методом анимации animate() */
  12.  
  13.           complete : function(){} /* Функция обратного вызова, которая срабатывает
  14.                                      по завершению прокрутки. */
  15.        
  16. });
  17.  
2. DelphinPRO - 23 Июня, 2013 - 12:40:55 - перейти к сообщению
Интересно, а с другими плагинами (например стилизация скроллбаров) будет работать? корректно работать?
надо будет опробовать..
3. armancho7777777 - 23 Июня, 2013 - 12:46:53 - перейти к сообщению
DelphinPRO пишет:
например стилизация скроллбаров

Они могут использоавать не сам скроллинг как таковой,
а относительное позиционирование дочернего элемента.
Как, например, плагин JScrollPane.
(Добавление)
Но, по идее, должно работать корректно в связке с ними,
так как они испольют значения дельты объекта события mousewheel при расчётах применяемых для позиционирования,
а метод capScroll блокирует именно его.
4. DelphinPRO - 23 Июня, 2013 - 13:21:30 - перейти к сообщению
armancho7777777 пишет:
Они могут использоавать не сам скроллинг как таковой,
а относительное позиционирование дочернего элемента.

мы с недавнего времени используем эту разработку https://github[dot]com/Diokuz/baron - там используется нативный скролл (на хабре была статья с подробностями)
5. armancho7777777 - 23 Июня, 2013 - 13:34:01 - перейти к сообщению
DelphinPRO, обновил кое что в коде.
Теперь работает с Вашим плагином.
В их примере задействованы элементы с классом scroller, к ним и цепляем:
CODE (javascript):
скопировать код в буфер обмена
  1. $('.scroller').baron();
  2. $('.scroller').capScroll();


Исправил кое-что ещё.
Кто скачивал - обновитесь.
6. DelphinPRO - 23 Июня, 2013 - 15:39:50 - перейти к сообщению
благодарю )
будем использовать.

ps. репо на гитхабе бы сделал, полезный плагинчик
7. armancho7777777 - 23 Июня, 2013 - 15:51:19 - перейти к сообщению
DelphinPRO пишет:
репо на гитхабе бы сделал, полезный плагинчик

Сделаю на днях ))
8. armancho7777777 - 23 Июня, 2013 - 19:25:07 - перейти к сообщению
Исправил кое-что ещё.
Кто скачивал - обновитесь.
9. nerv - 23 Июня, 2013 - 20:04:03 - перейти к сообщению
в целом полезная штука, только я бы отвязал фиксирование прокрутки родительского элемента и вынес в отдельный плагин

upd: есть много способов прокрутки. Один из них: нажать на колесо мыши на блоке, кот. требуется прокрутить и опустить мышь вниз блока
10. armancho7777777 - 23 Июня, 2013 - 20:55:23 - перейти к сообщению
nerv пишет:
я бы отвязал фиксирование прокрутки родительского элемента и вынес в отдельный плагин

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

nerv пишет:
есть много способов прокрутки.

К делу не относится.
Плагин преднозначен не для этого.
Хотя прокрутка с ним ведёт себя более логично:
на пример, можно придать ускорение именно скоростью вращения колёсика ))
Более того, на его базе можно уже реализовать пользовательский скролл-бар,
что я в прочем и сделаю в дальнейшем )
В примере по ссылке просто плагин подключен глобально,
к основному контейнеру документа,
чтобы показать его на деле полностью, так сказать во всей красе )
11. armancho7777777 - 24 Июня, 2013 - 11:23:25 - перейти к сообщению
Исправлен алгоритм прокрутки.
12. vanicon - 24 Июня, 2013 - 11:50:20 - перейти к сообщению
armancho7777777
Спасибо, полезный плагин, определенно понадобиться...
Например, недавно с всплывающими окнами (overlay) работал, тоже с родительской прокруткой были проблемы, но там я просто убирал родительскую прокрутку...
13. armancho7777777 - 24 Июня, 2013 - 12:33:25 - перейти к сообщению
Переписал код, оптимизировал.
Минимизированная версия весит 2kb.
Обновитесь, кто скачивал.


vanicon пишет:
Спасибо

На здоровье vanicon.
14. armancho7777777 - 24 Июня, 2013 - 14:45:20 - перейти к сообщению
Исправил кое-что ещё.
15. nerv - 24 Июня, 2013 - 18:57:12 - перейти к сообщению
armancho7777777 пишет:
А что бы оставили интересно?

фиксирование родителя

armancho7777777 пишет:
на пример, можно придать ускорение именно скоростью вращения колёсика ))

это и т.п. в отдельный

повторю: в хроме пример не корректно работает, если:
1. установить курсор внутри блока с текстом
2. нажать на колесо мыши
3. опустить мышь вниз блока с текстом (что вызовет прокрутку блока, а затем всей страницы)

armancho7777777 пишет:
Исправил кое-что ещё.

исчерпывающе Ха-ха

не смотрел, как именно работает твой плагин. Набросал кое-что на скорую руку, может пригодится http://learn[dot]javascript[dot]ru/play/V0IzPb

 

Powered by ExBB FM 1.0 RC1