Эффект смягчения плавной прокрутки с помощью колесика мыши

Недавно я наткнулся на этот веб-сайт http://www.ascensionlatorre.com/home, и мне нравится, как работает прокрутка колесика мыши. - ослабление очень плавное.

Я искал Google, но я не могу найти ничего похожего.

Есть ли у кого-нибудь предложения о том, как воспроизвести этот эффект с помощью jQuery?


person idbranding    schedule 04.02.2012    source источник
comment
С этой прокруткой происходит много всего, с навигацией по меню в соответствии с прокруткой, разделами, появляющимися/исчезающими в разное время и т. д., поэтому я думаю, что это далеко не исчерпывающий вопрос для SO. Попробуйте сами и вернитесь, чтобы задать конкретные вопросы о вещах, на которых вы застряли на этом пути.   -  person Christofer Eliasson    schedule 04.02.2012
comment
Почему палец вниз? Я задал конкретный вопрос, мне было интересно, как работает замедление колесика мыши. Я здесь, чтобы учиться, а не воровать   -  person idbranding    schedule 04.02.2012
comment
Понижение, потому что я думаю, что вопрос слишком широк. Существует ряд компонентов, обеспечивающих плавную прокрутку, с перекрывающимся содержимым, которое раздвигается при прокрутке, настраиваемой полосой прокрутки, плавным переходом и т. д. Описание того, как сделать все это с помощью jQuery, является исчерпывающим для одного вопроса SO.   -  person Christofer Eliasson    schedule 04.02.2012
comment
Хорошо, я понял, но единственное, что я хотел бы знать (укажите мне направление), это ослабление колесика мыши, а не все другие эффекты, которые вы упомянули.   -  person idbranding    schedule 04.02.2012
comment
Возможный дубликат: stackoverflow.com/questions/5560714/   -  person Anderson Green    schedule 02.04.2013
comment
очень просто и мягко github.com/simov/ simplr-smoothscroll/blob/master/lib/   -  person m-khonsari    schedule 19.04.2015


Ответы (5)


Недавно я тоже столкнулся с этой проблемой и не нашел поддержки, поэтому быстро забыл об этой проблеме. Несколько месяцев спустя я увидел лучший пример плавной прокрутки, поэтому я пошел и покопался в файлах JavaScript, которые они использовали, и обнаружил, что они используют файл jQuery под названием NiceScroll.

Я считаю, что это то, что мы оба искали — простая плавная прокрутка для div, iframe или чего-то еще, очень похожая на прокрутку iOS.

http://areaaperta.com/nicescroll/

person Dylan    schedule 13.09.2012
comment
Это всего лишь 10 строк кода, зачем кому-то включать сотни строк кода? вот это jsfiddle.net/7ZVb7/1383 - person iKamy; 07.09.2013
comment
@CameronA - ваш пример jsfiddle в настоящее время прокручивается только вниз, а не назад. Также я уверен, что есть лучшие файлы js, которые могли бы справиться с хорошей прокруткой с меньшим количеством строк кода, но этому посту сегодня исполнился год. - person Dylan; 13.09.2013
comment
эта ссылка кем-то отредактирована и возникла проблема, она правильная;) jsfiddle.net/7ZVb7/1383 - person iKamy; 14.09.2013
comment
Я проверил еще раз, моя ссылка работает нормально, прокручивайте вверх и вниз с эффектом легкости и эффектом Android. - person iKamy; 14.09.2013
comment
Я не знаю, почему я проверил на 3 компьютере, просто проверьте мой профиль переполнения стека, я включаю свой собственный fb, отправьте мне сообщение на facebook, а затем я отправлю вам электронное письмо для этого примера :) - person iKamy; 17.09.2013
comment
@CameronПривет еще раз! Это беспокоило меня, почему это не работало на моей машине, и я хотел уточнить проблемы, которые у меня были, после небольшого тестирования выяснилось, что mWheels с шагом 2+ (у меня установлено значение 3) отключит его при прокрутке в середине анимации и продолжит текущее направление, если scrollDirection изменится. пример: если прокрутить вниз, то переключитесь на прокрутку вверх, пока анимация работает, она будет продолжать прокручиваться вниз. - person Dylan; 26.11.2013
comment
Привет @CameronA, это было давно, и я просто хотел пересмотреть ваш ответ на этот ответ с видео о том, что происходит с вашим кодом. Проблема неправильного направления прокрутки все еще существует в самых последних версиях Chrome, Safari и Firefox, и я хотел предостеречь всех от ее использования. i.imgur.com/h3CI4Yd.gif - person Dylan; 20.02.2015
comment
очень просто и мягко github.com/simov/ simplr-smoothscroll/blob/master/lib/ - person m-khonsari; 19.04.2015
comment
Я не считаю хорошей практикой изменять скорость прокрутки, за исключением, может быть, ссылок, потому что это мешает работе. Кто-то может зайти на ваш сайт и удивиться, почему здесь странная прокрутка. - person Omar; 07.02.2017
comment
Люди должны заметить, что многие из этих скриптов для прокрутки действительно делают сайт непригодным для использования теми, кто все еще использует мышь или трекбол со свободной прокруткой. На упомянутом выше сайте скорость прокрутки настолько высока, что мне приходится прибегать к стрелкам клавиатуры для навигации. Прежде чем использовать базовую операцию, например прокрутку, подумайте, действительно ли она будет работать во всех распространенных сценариях. - person sporker; 27.05.2017
comment
Согласитесь, за 4 года облегчение прокрутки прошло долгий путь, приведенный выше ответ, вероятно, устарел. - person Dylan; 30.05.2017

http://areaaperta.com/nicescroll/

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

ИЗМЕНИТЬ У меня была рабочая демоверсия, но я удалил ее из-за смены хостинга и домена, извините за это.

person hellojebus    schedule 02.02.2013
comment
Ссылка не работает Ошибка установления соединения с базой данных - person Naren Verma; 29.11.2017

Хорошо, приятель, я постараюсь помочь по твоему запросу с некоторым материалом. Я нашел этот урок для себя, надеюсь, он будет полезен и вам. Это основа сайта, на который вы ссылаетесь: http://johnpolacek.github.com/scrollorama/.

http://johnpolacek.github.com/scrolldeck.js/

person Panshul    schedule 04.02.2012
comment
Прежде всего, спасибо за ваш ответ. Уже нашел этот сайт, анимация div не проблема. что мне нравится, так это эффект смягчения с помощью колесика мыши. Любые предложения для этого? - person idbranding; 04.02.2012
comment
Да, я знаю этот пример, он не поддерживает замедление колесика мыши - person idbranding; 04.02.2012
comment
Хотите знать, удалось ли вам найти решение? Я тоже ищу что-то подобное, и у меня проблемы с поиском решений через Google. - person DBUK; 09.05.2012
comment
manos.malihu.gr/tuts/jquery_custom_scrollbar.html — этот вариант ближе всего - person idbranding; 10.05.2012
comment
пожалуйста, проверьте мою скрипку, также всего 10 строк кода. Также с мобильным эффектом :) jsfiddle.net/7ZVb7/1383 - person iKamy; 07.09.2013

У меня тот же вопрос, который вы задали. Я захожу на указанный вами сайт и узнаю ответ!

Они использовали jquery.mousewheel.js, и вы можете использовать консоль Chrome, чтобы найти скрипт. Просто наберите «колесико мыши», и вы найдете функцию «прокрутка». Причина плавной прокрутки заключается в том, что они не использовали анимацию jquery, а использовали setInternal javascript для ее создания. Вы можете узнать из кода.

Я верю, что ты сможешь это сделать.

person Winters    schedule 11.09.2012

Я не копался в коде, но подозреваю, что они используют переходы CSS3.

transition: all 1s

На вашем элементе (конечно, с префиксом производителя) анимация от эффектов параллакса будет сглажена.

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

person eighteyes    schedule 26.03.2013