/ Сайтостроение / Scripts & jquery / Плавный скроллинг колесом

Плавный скроллинг колесом

HIT

29.09.2015

2818

Сайт воспринимается более профессионально, если на нем реализована плавная прокрутка колесом.

Игнорируются при наведении дополнительные области со скроллингом, т.е. проматывается сама страница, а не область

Все это надо поместить в подвал: скрипт, инициализация скрипта.

<script src="<?php bloginfo('stylesheet_directory'); ?>/js/plugins-scroll.js"></script>
<script>
// Skroll-page
$(document).ready(function() {
//Chrome Smooth Scroll
try {
$.browserSelector();
if($("html").hasClass("chrome")) {
$.smoothScroll();
}
} catch(err) {

};

});</script>

Изначально требовалось подключение версии jquery
<script src=»https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js»></script>
но при этом были конфликты с другими версиями jquery и как следствие глючили различные плагины и модули

Нормально работает при добавлении в файл funсtions такого кода (правильная загрузка версий jquery)

// Правильное подключение библиотеки jquery

add_action( 'wp_enqueue_scripts', 'my_load_scripts' );
/**
* Подключаем jQuery из гугла
*/
function my_load_scripts() {

if( !is_admin() ) {
wp_deregister_script( 'jquery-core' ); // отключаем только jquery без jquery-migrate
wp_register_script( 'jquery-core', '//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js', array(), null, true ); // регистрируем крайнюю версию из гугла
add_filter( 'script_loader_src', 'jquery_local_loader', 10, 2 ); // вешаем на загрузку скрипта альтернативный jquery
wp_enqueue_script( 'jquery' );
}

}



// проверяем загрузилась библиотека и если нет грузим локальную из вордпресс
add_action( 'wp_head', 'jquery_local_loader' );

function jquery_local_loader( $src, $handle = null ) {

static $add_jquery_fallback = false;

if( $add_jquery_fallback ) {
echo '<script>window.jQuery || document.write(\'<script src="' . includes_url() . 'js/jquery/jquery.js"><\/script>\')</script>' . "\n";
$add_jquery_fallback = false;
}

if( $handle === 'jquery-core' ) {
$add_jquery_fallback = true;
}

return $src;

}

// для маньяков безопасности отключаем версии скриптов
function port_remove_cssjs_ver( $src ) {
if( strpos( $src, '?ver=' ) )
$src = remove_query_arg( 'ver', $src );
return $src;
}

add_filter( 'script_loader_src', 'port_remove_cssjs_ver', 10, 2 );

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

<script type='text/javascript' src='http://liderstroy-ug.ru/wp-content/themes/f-shop/scripts/smooth-scrollbar.js'></script>

Иногда возникают проблемы с тем что не колесо не реагирует (в Opere) — чтобы это устранить надо обновить историю (кэш, куки) браузера

Перестает работать функция браузера увеличение/уменьшение страницы при нажатии cnrl + колесо мыши. Альтернатива: масштабировать cnrl + кнопки +/-

Плагин MouseWheel Smooth Scroll

Этот же функционал предоставляет плагин MouseWheel Smooth Scroll (6 000 установок). В плагине всего две настройки: Step (сила прокрутки) и Speed (скорость прокрутки) (по умолчанию 100 / 400, я ставлю 150 / 500).

Тэги:

Поделится информацией с друзьями

  • Похожие записи
  • Комментарии
  • Вложения
Изменение объекта при скроллинге

Изменение объекта при скроллинге

Учимся использовать jquery эффекты при скроллинге. Данные эффекты чаще всего применяются на промо-страницах и лэндингах. ScrollMe Скрипт Scrollme состоит из одного файла с набором скриптов, подключаем его wp_enqueue_script( 'scrollme', get_template_directory_uri() Читать далее »

Scrollspy jquery

Scrollspy jquery

Скрипт scrollspy jquery отслеживающий положение скрола, в котором мы находится в данный момент. Чаще всего это используется для изменения состояния меню, изменение фона, а также для каких-либо событий. Подключение скрипта Читать далее »

/
Блок с горизонтальной прокруткой

Блок с горизонтальной прокруткой

Делаем секцию (блок) с горизонтальной прокруткой. Внутри предполагаются изображения, но может быть все что угодно. Данный блок можно использовать в лэндинге, либо таким образом вводить галерею изображений. jQuery mousewheel plugin Читать далее »

Добавить комментарий

Пока нет комментариев. Будь первым!

Плавный скроллинг колесом
Посты — метки на карте
Рекомендации для васПосты — метки на картеOpttour.ru
Спасибо! Наш менеджер свяжется с Вами в течении 5 минут.