Придаём мультитач эффект блокам с полосой прокрутки через плагин Kinetic на jQuery
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<script src="/js/jquery.kinetic.min.js"></script> <script> $(function() { $(".apodiv").kinetic({ cursor: 'default', // Тип курсора slowdown: 0.98, // Скорость замедления maxvelocity: 200, // Максимальное ускорение x: true, // Прокручивать по горизонтали y: true, // Прокручивать по вертикали maxvelocity: 0, // Ограничение на скорость прокрутки throttleFPS: 60, // Максимальный FPS (Влияет на плавность) triggerHardware: false, // Использовать аппаратное ускорение на iOs invert: false, // Инвертировать ли событие прокрутки }); }); </script> |
1 2 3 |
$(".apodiv").kinetic('start', { velocity: -30 }); |
1 |
$(".apodiv").kinetic('end'); |
1 |
$(".apodiv").kinetic('stop'); |
1 |
$(".apodiv").kinetic('detach'); |
1 2 3 |
$(".apodiv").kinetic('attach', { // Параметры }); |
1 2 3 |
<div class="apodiv"> Здесь абсолютно любой ваш контент </div> |
1 2 3 4 5 6 7 8 |
.apodiv { width: 300px; height: 500px; overflow-x: hidden; border: 10px solid #f33; padding: 10px; margin: 20px; } |