Kredov long

jQuery прокрутка (страниц, div блоков, горизонтальная и вертикальная)

Тема в разделе "JavaScript", создана пользователем marsrip, 28 мар 2013.

  1. marsrip

    marsrip

    Регистрация:
    13 мар 2013
    Сообщения:
    116
    Симпатии:
    55
    [​IMG]



    Если вам нужно создать красивую прокрутку для обычного html блока – этот плагин отлично подходит для этого. Есть два вида прокрутки (скроулинга) – вертикальная и горизонтальная, так же прокрутка работает при прокрутке колесика мышки. Еще важным моментом является – настройка скорости прокрутки и высоты поля с ползунком для прокрутки.

    Давайте посмотрим как это работает на деле.
    Сначала интегрируем стили и библиотеки со скриптами:


    Код:
    <link href="jquery.mCustomScrollbar.css" rel="stylesheet" type="text/css" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type="text/javascript"></script>
    <script src="jquery.easing.1.3.js" type="text/javascript"></script>
    <script src="jquery.mousewheel.min.js" type="text/javascript"></script>
    Теперь давайте займемся построением HTML структуры для этого плагина прокрутки:

    Код:
    <div id="mcs_container">
    <div class="customScrollBox">
    <div class="container">
    <div class="content">
    <p>Содержание блока</p></div>
    </div>
    <div class="dragger_container"></div>
    </div>
    <!--  Кнопки скроулинга  -->
    <a class="scrollUpBtn" href="#"></a> <a class="scrollDownBtn" href="#"></a>
    </div>
    </div></div>
    Теперь добавим еще несколько строк в CSS правило для тех у кого отключен javascript:
    <noscript>
    	<style type="text/css">
    		#mcs_container .customScrollBox{overflow:auto;}
    		#mcs_container .dragger_container{display:none;}
    	</style>
    </noscript>
     
    Последним шагом является запуск скрипта и интеграция дополнительной библиотеки для прокрутки в конце документа:
    <script>
    $(window).load(function() {
    	$("#mcs_container").mCustomScrollbar("vertical",400,"easeOutCirc",1.05,"auto","yes","yes",10);
    });
    </script>
    <script src="jquery.mCustomScrollbar.js" type="text/javascript"></script>

    Так же вы можете настроить плагин так как вам хочется, используя набор возможностей передаваемые функцией mCustomScrollbar:

    1. Первым идет параметр определяющий ориентацию прокрутки – вертикальная или горизонтальная (“vertical”, “horizontal”)
    2. Так же можно задать цифру ослабления прокрутки
    3. Тип прокрутки
    4. Дополнительное пространство для прокрутки (только для вертикальной прокрутки)
    5. Установить высоту и ширину пространства для ползунка прокрутки (по-умолчанию auto – равен размеру блока)
    6. Поддерживать прокрутку колесиком мышки (“yes” или “no”)
    7. Поддерживать прокрутку кнопками клавиатуры (“yes” или “no”)
    8. Скорость прокрутки кнопками клавиатуры от 1 до 20
    Пример скачать можно тут