jQuery scroll plugin

Нашел в понедельник плагин для mootools который заменяет обычную полосу прокрутки. Очень понравилась идея, и очень не понравилась реализация, ОЧЕНЬ много кода у чувака вышло на какой-то скроллинг. У меня был махонький опыт работы со скроллингом в плагине автокомплит и я решил переписать все с нуля на jQuery.

Идея была хорошая, реализация — гавно. Сидел писал… Разруливал грабли.

Началось все с чертовой верстки, ее как обычно не понял IE, но там особых проблем не возникло, кое-что через скрипт поправил.

Первой неприятной граблей было отсутствие в jQuery поддержки колесика мишки, но плагин на этот случай нашелся очень быстро. Обожаю jQuery за огромное количество плагинов! И не смотря на то что плагин небольшой это уже давало лишний код и лишнюю зависимость для моего плагина. Не айс :(

Второй граблей стал ползунок, на него надо было натянуть drag. Тоесть перетаскивание, писать самому этот гемор я не решился, мне не настолько не хуй делать. Откуда взять драг? Правильно из jQuery UI. Примастырил я его довольно легко, благо там все просто. Оказалось еще два дополнительных файла (core и draggable) и килобайты лишнего кода. Мне это очень не понравилось, но ничего поделать я не мог.

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

Ок, ползунок стал куда ему требовалось теперь надо было из скрипта активировать событие drag. Поначалу даже не знал с чего начать, пробовал вызывать события mousedown и mousemove по очереди, потом вызвать их оба сразу, никаких результатов. Полез в код UI разбираться. От туда как-то вытащил событие «mousedown.draggable», попытался его вызвать через trigger, получил ошибку о зациклившейся рекурсии. Долго ругался. Гуглил. Узнал что так можно было делать еще в версии 1.5.3, а теперь это перекрыли. Авторы советуют использовать плагин симуляции пользователя. Долго ругался на дополнительный код, хотел из него что-то удалить, плюнул, поставил. Ура! Заработало. Потом уже во время написания статьи и проверки в IE и других браузерах оказалось что работает этот чудо-плагин тока в FireFox’e. Н у и хуй с ним, всеравно в оригинальном плагине так не работало.

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

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut id eros eget dui tincidunt aliquam. Nulla mollis, erat suscipit pellentesque bibendum, nulla risus ultrices tellus, laoreet lobortis libero urna sit amet sem. Nunc placerat augue in felis condimentum fringilla. Mauris in sapien quis dolor sagittis pretium sit amet quis ante. Suspendisse elit arcu, pellentesque eget suscipit et, pharetra sit amet massa. Integer ut tortor sed tortor accumsan venenatis quis a ipsum. Aliquam erat volutpat. Mauris varius tincidunt tortor, sed feugiat enim lobortis eu. Aenean vitae metus augue, vel auctor mi. Cras sapien augue, interdum dignissim eleifend vel, porttitor eget ante. Cras feugiat varius ante, vel tincidunt quam congue ac. Aenean id purus nec diam sodales dignissim sit amet id turpis. Curabitur dignissim tincidunt euismod. Fusce euismod iaculis placerat. Donec consectetur ultrices semper. Pellentesque tellus ipsum, ultricies at fermentum sit amet, volutpat sit amet libero. Curabitur id lacus ipsum. Aliquam vulputate, est in mattis porttitor, lectus ante blandit turpis, vitae luctus felis purus vel libero.

Nulla velit augue, rutrum eu egestas rhoncus, aliquam at ante. Ut in dolor non orci malesuada commodo vitae non sem. Vestibulum quis neque ut massa tempus aliquet. Sed congue est sed arcu molestie consequat. Aenean eget dapibus lorem. Suspendisse tempor sem sit amet urna fermentum nec aliquam massa aliquet. Curabitur quis risus non est tincidunt congue id in neque. Nulla vel lorem ipsum. Nullam laoreet odio id nibh molestie sagittis eu ut ipsum. Donec ut risus vitae ante gravida lacinia. Integer quis enim massa. Donec ligula arcu, facilisis eget scelerisque et, dapibus non turpis. Maecenas quis orci tortor, sit amet porttitor leo.

Donec ullamcorper nisl dapibus mi semper non congue nunc luctus. Curabitur vitae erat neque, sed tincidunt arcu. Donec sodales rhoncus lectus et condimentum. Etiam dignissim odio a diam luctus congue. Nam vel tortor odio. Ut eu rutrum nibh. Pellentesque urna velit, laoreet quis semper eget, tempus non urna. Nam commodo turpis eget diam suscipit eget pulvinar diam auctor. Maecenas eu velit facilisis velit convallis vehicula vel sed nibh. Vivamus at ultricies justo. Ut eleifend libero eget leo varius sed aliquam turpis semper. Praesent dui sem, suscipit vel convallis et, pretium at dolor. Maecenas mollis pharetra metus, tempus luctus lacus tristique sit amet. Donec scelerisque ultrices varius.

Будет настроение буду доделывать… Уберу чертов плагин симуляции, всеравно не пашет… Потом там есть бага, когда сначала кликнул на полосу прокрутки, а потом на стрелку вверх, ползунок чуть вниз зъезжает. Посмотрим может не лень будет.

Добавлено 04.06.09 в 2 ночи. После 2 часов дебага обнаружил что плагин симуляции пользователя корректно работает только если виджет расположен на первом экране, то есть сама страницы с виждетом не проскроллена. После чего все воспоминания про плагин были выкинуты из кода. Застрелите меня.

Добавлено 05.06.09 в 12 ночи. Наконец-то доделал. Теперь скроллинг полностью имитирует поведение виндового скроллинга. И его можно применять не только к отдельному элементу но и ко всей странице.


jQuery(function($) {
	$(document).jscroll({axis: {y: true, x: true}});
});

Размер моего плагина (не сжатым) 6 424 байт, а размер оригинального 23 076. При этом размер всех подключаемых js файлов (сжатых) у jquery 91 725, а у mootools 96 157 байт.

Добавлено 06.06.09 в 20:00. Добавлена поддержка IE 7 & 8. В IE 6 неправильно возвращается свойство scrollHeight, поэтому скроллинг глючит.

79 Комментарии “jQuery scroll plugin

  1. Хы… Я его в свое время ручкам на чистом JS писал))) Где же ты был, джиквери)))

  2. да жуквери сильно облегчает жизнь, но конкретно в этом плагине много расчетов на чистом жс

  3. Молодец!
    Давно искал такое именно на jQuery, хотел написать сам, но не хватило знаний.
    Спасибо за вещь!

  4. Все просто, когда знаешь. А когда не знаешь и нет особо опыта и знаний, то это очень даже вопрос.

  5. Код не человекочитаемый у тебя, не мог бы выложить версию без извращений над кодом. А то невозможно чтолибо изменить в коде под свои нужды.
    Спасибо

  6. @hoblin
    не тормозная. есть два способа увеличить скорость. первая это опция increment задайте число больше 10. но если так делать то и прокрутка кнопками тоже ускориться. чтобы ускорить только прокрутку колесиком мыши найди строку

    
    html.content.mousewheel(function(e,delta){
    	self.doScrollTop(delta, 1);
    

    и замени 1 на сколько надо

  7. @CTAPbIu_MABP
    Да я в курсе. Нашел уже :) Но в том плагине который я указал дельта высчитывается с привязкой к контенту

    
    $container.bind(
    	'mousewheel',
    	function (event, delta) {
    		delta = delta || (event.wheelDelta ? event.wheelDelta / 120 : (event.detail) ? -event.detail/3 : 0);
    		initDrag();
    		ceaseAnimation();
    		var d = dragPosition;
    		positionDrag(dragPosition - delta * mouseWheelMultiplier);
    		var dragOccured = d != dragPosition;
    		return !dragOccured;
    	}
    );
    

    IMHO довольно интересное решение

  8. ты имеешь ввиду чтобы контент скролился на всю видимую область, я думаю это не сложно сделать

  9. Смотри. И у него и у тебя за один щелчок колесика проматывается чуть меньше одной строчки текста. Но если крутануть очень быстро — у него промотается сразу половина текста, а у тебя — по прежнему по строчке на щелчек. У него как-то скорость прокрутки учитывается похоже.

  10. Более того, при определенной скорости вращения колосика у тебя вообще происходит «проскальзывание». Текст не движется. Это все в фф и хроме

  11. В doScrollTop поменял интервал с 50 до 5 — заскроллилось нормально :)

  12. В общем поставил. Осталось довести до ума прокрутку колесиком и добавить возможность после инициализации перематывать на определенную позицию.

  13. А почему эту прокрутку нельзя поставить на другое событие, кроме jQuery().ready? Я пробовал поставить на onclick, но прокрутка оставалась неактивной. (((

  14. у меня возникла проблема со скролом в лайтбоксе, так как изначально контент скрыт(display:none) то его длинна неизвестна. Поэтому я запуская скрол после появления лайтбокса с контентом. И оказывается что если его запускать из функции какой либо, то он не определяет высоту контента.
    ну например вот так:

    
    jQuery().ready(function($) {
    
    	$("body").click(function () {
    		  $(".scroll").jscroll({axis : {y:true,x:false}});
    	});
    		
    });
    

    помогите решить эту проблему

  15. Доброго дня!
    Автор, можете подсказать, можно ли сделать фиксированный размер горизонтального ползунка:
    Хочу сделать ползунок фиксированного размера. В принципе это непроблема:
    var q = ’13px’; // :)
    html[‘scrollHandleBG’+cvh][hw](q);
    html[‘scrollHandle’+cvh][hw](q);

    Но расчёт движения всё равно происходит, как будто горизонтальный ползунок большой (когда ширина слоя небольшая).

    Заранее спасибо!!

  16. @6coder
    я думаю это потому что диалог добавляет контенту свойство height:auto;
    это можно увидеть через фаербаг

  17. на onmousemove повесить событие, которое отслеживает координату мышки и если она близка к началу или концу страницы вызываться скролл. чем ближе мышка к краю теб больше множитель для скорости скролла

  18. Здравствуйте, вопрос. На сайте очень высокая графическая шапка (фоновая) — блок с контентом расположен низко на странице (например, при разрешении 1024*768, приходится прокручивать страницу на один «лист» как тут : www.***.ru , что бы добраться к контенту). Нужно добавить возможность «сворачивать» шапку так, чтоб она становилась просто фоном для блока с контентом, а не шапкой. Желательно реализовать плавное сдвижение блока с контентом вверх

Комментарии закрыты