PHP.SU

Программирование на PHP, MySQL и другие веб-технологии
PHP.SU Портал     На главную страницу форума Главная     Помощь Помощь     Поиск Поиск     Поиск Яндекс Поиск Яндекс     Вакансии  Пользователи Пользователи


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

> Описание: Захват скролла целевого объекта.
armancho7777777 Супермодератор
Отправлено: 23 Июня, 2013 - 12:19:52
Post Id



Активный участник


Покинул форум
Сообщений всего: 4658
Дата рег-ции: Февр. 2011  
Откуда: Иркутск, Россия


Помог: 214 раз(а)




Всем привет!
Представляю очередной мини плагин 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.  

Скачать файл: jquery.capScroll.js
Скачан раз: 81

(Отредактировано автором: 24 Июня, 2013 - 14:53:54)



-----
Болтовня ничего не стоит. Покажите мне код.
-Linus Torvalds
 
 Top
DelphinPRO
Отправлено: 23 Июня, 2013 - 12:40:55
Post Id



Активный участник


Покинул форум
Сообщений всего: 7190
Дата рег-ции: Февр. 2012  


Помог: 353 раз(а)




Интересно, а с другими плагинами (например стилизация скроллбаров) будет работать? корректно работать?
надо будет опробовать..


-----
Чем больше узнаю, тем больше я не знаю.
 
 Top
armancho7777777 Супермодератор
Отправлено: 23 Июня, 2013 - 12:46:53
Post Id



Активный участник


Покинул форум
Сообщений всего: 4658
Дата рег-ции: Февр. 2011  
Откуда: Иркутск, Россия


Помог: 214 раз(а)




DelphinPRO пишет:
например стилизация скроллбаров

Они могут использоавать не сам скроллинг как таковой,
а относительное позиционирование дочернего элемента.
Как, например, плагин JScrollPane.
(Добавление)
Но, по идее, должно работать корректно в связке с ними,
так как они испольют значения дельты объекта события mousewheel при расчётах применяемых для позиционирования,
а метод capScroll блокирует именно его.

(Отредактировано автором: 23 Июня, 2013 - 21:57:21)



-----
Болтовня ничего не стоит. Покажите мне код.
-Linus Torvalds
 
 Top
DelphinPRO
Отправлено: 23 Июня, 2013 - 13:21:30
Post Id



Активный участник


Покинул форум
Сообщений всего: 7190
Дата рег-ции: Февр. 2012  


Помог: 353 раз(а)




armancho7777777 пишет:
Они могут использоавать не сам скроллинг как таковой,
а относительное позиционирование дочернего элемента.

мы с недавнего времени используем эту разработку https://github[dot]com/Diokuz/baron - там используется нативный скролл (на хабре была статья с подробностями)

(Отредактировано автором: 23 Июня, 2013 - 13:23:18)



-----
Чем больше узнаю, тем больше я не знаю.
 
 Top
armancho7777777 Супермодератор
Отправлено: 23 Июня, 2013 - 13:34:01
Post Id



Активный участник


Покинул форум
Сообщений всего: 4658
Дата рег-ции: Февр. 2011  
Откуда: Иркутск, Россия


Помог: 214 раз(а)




DelphinPRO, обновил кое что в коде.
Теперь работает с Вашим плагином.
В их примере задействованы элементы с классом scroller, к ним и цепляем:
CODE (javascript):
скопировать код в буфер обмена
  1. $('.scroller').baron();
  2. $('.scroller').capScroll();


Исправил кое-что ещё.
Кто скачивал - обновитесь.

(Отредактировано автором: 23 Июня, 2013 - 14:56:10)



-----
Болтовня ничего не стоит. Покажите мне код.
-Linus Torvalds
 
 Top
DelphinPRO
Отправлено: 23 Июня, 2013 - 15:39:50
Post Id



Активный участник


Покинул форум
Сообщений всего: 7190
Дата рег-ции: Февр. 2012  


Помог: 353 раз(а)




благодарю )
будем использовать.

ps. репо на гитхабе бы сделал, полезный плагинчик


-----
Чем больше узнаю, тем больше я не знаю.
 
 Top
armancho7777777 Супермодератор
Отправлено: 23 Июня, 2013 - 15:51:19
Post Id



Активный участник


Покинул форум
Сообщений всего: 4658
Дата рег-ции: Февр. 2011  
Откуда: Иркутск, Россия


Помог: 214 раз(а)




DelphinPRO пишет:
репо на гитхабе бы сделал, полезный плагинчик

Сделаю на днях ))

(Отредактировано автором: 23 Июня, 2013 - 16:39:59)



-----
Болтовня ничего не стоит. Покажите мне код.
-Linus Torvalds
 
 Top
armancho7777777 Супермодератор
Отправлено: 23 Июня, 2013 - 19:25:07
Post Id



Активный участник


Покинул форум
Сообщений всего: 4658
Дата рег-ции: Февр. 2011  
Откуда: Иркутск, Россия


Помог: 214 раз(а)




Исправил кое-что ещё.
Кто скачивал - обновитесь.


-----
Болтовня ничего не стоит. Покажите мне код.
-Linus Torvalds
 
 Top
nerv
Отправлено: 23 Июня, 2013 - 20:04:03
Post Id



Посетитель


Покинул форум
Сообщений всего: 407
Дата рег-ции: Февр. 2013  
Откуда: Россия


Помог: 9 раз(а)




в целом полезная штука, только я бы отвязал фиксирование прокрутки родительского элемента и вынес в отдельный плагин

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

(Отредактировано автором: 23 Июня, 2013 - 20:33:04)



-----
Чебурашка стал символом олимпийских игр. А чего достиг ты?
Тишина - самый громкий звук
 
 Top
armancho7777777 Супермодератор
Отправлено: 23 Июня, 2013 - 20:55:23
Post Id



Активный участник


Покинул форум
Сообщений всего: 4658
Дата рег-ции: Февр. 2011  
Откуда: Иркутск, Россия


Помог: 214 раз(а)




nerv пишет:
я бы отвязал фиксирование прокрутки родительского элемента и вынес в отдельный плагин

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

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

К делу не относится.
Плагин преднозначен не для этого.
Хотя прокрутка с ним ведёт себя более логично:
на пример, можно придать ускорение именно скоростью вращения колёсика ))
Более того, на его базе можно уже реализовать пользовательский скролл-бар,
что я в прочем и сделаю в дальнейшем )
В примере по ссылке просто плагин подключен глобально,
к основному контейнеру документа,
чтобы показать его на деле полностью, так сказать во всей красе )

(Отредактировано автором: 23 Июня, 2013 - 21:47:13)



-----
Болтовня ничего не стоит. Покажите мне код.
-Linus Torvalds
 
 Top
armancho7777777 Супермодератор
Отправлено: 24 Июня, 2013 - 11:23:25
Post Id



Активный участник


Покинул форум
Сообщений всего: 4658
Дата рег-ции: Февр. 2011  
Откуда: Иркутск, Россия


Помог: 214 раз(а)




Исправлен алгоритм прокрутки.


-----
Болтовня ничего не стоит. Покажите мне код.
-Linus Torvalds
 
 Top
vanicon
Отправлено: 24 Июня, 2013 - 11:50:20
Post Id



Частый посетитель


Покинул форум
Сообщений всего: 808
Дата рег-ции: Янв. 2010  
Откуда: Самара


Помог: 17 раз(а)




armancho7777777
Спасибо, полезный плагин, определенно понадобиться...
Например, недавно с всплывающими окнами (overlay) работал, тоже с родительской прокруткой были проблемы, но там я просто убирал родительскую прокрутку...


-----
Так было, так есть и так будет
 
 Top
armancho7777777 Супермодератор
Отправлено: 24 Июня, 2013 - 12:33:25
Post Id



Активный участник


Покинул форум
Сообщений всего: 4658
Дата рег-ции: Февр. 2011  
Откуда: Иркутск, Россия


Помог: 214 раз(а)




Переписал код, оптимизировал.
Минимизированная версия весит 2kb.
Обновитесь, кто скачивал.


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

На здоровье vanicon.

(Отредактировано автором: 24 Июня, 2013 - 12:34:30)



-----
Болтовня ничего не стоит. Покажите мне код.
-Linus Torvalds
 
 Top
armancho7777777 Супермодератор
Отправлено: 24 Июня, 2013 - 14:45:20
Post Id



Активный участник


Покинул форум
Сообщений всего: 4658
Дата рег-ции: Февр. 2011  
Откуда: Иркутск, Россия


Помог: 214 раз(а)




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


-----
Болтовня ничего не стоит. Покажите мне код.
-Linus Torvalds
 
 Top
nerv
Отправлено: 24 Июня, 2013 - 18:57:12
Post Id



Посетитель


Покинул форум
Сообщений всего: 407
Дата рег-ции: Февр. 2013  
Откуда: Россия


Помог: 9 раз(а)




armancho7777777 пишет:
А что бы оставили интересно?

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

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

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

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

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

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

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


-----
Чебурашка стал символом олимпийских игр. А чего достиг ты?
Тишина - самый громкий звук
 
 Top
Страниц (8): [1] 2 3 4 5 6 7 8 »
Сейчас эту тему просматривают: 1 (гостей: 1, зарегистрированных: 0)
« Хранилище функций на JavaScript »


Все гости форума могут просматривать этот раздел.
Только зарегистрированные пользователи могут создавать новые темы в этом разделе.
Только зарегистрированные пользователи могут отвечать на сообщения в этом разделе.
 



Powered by PHP  Powered By MySQL  Powered by Nginx  Valid CSS  RSS

 
Powered by ExBB FM 1.0 RC1. InvisionExBB