Dragon - smart scrolling jQuery plugin for correct scrolling mechanics
-
Click and drag for scroll content in both direction. On desktop with mouse, like a touch on tablet. Accelerated and inertial motion(easing) for all scrollable blocks.
-
Scroll page with mouse wheel in both direction. Horizontal or vertical scroll available any time. Without modification key.
-
Smoth scrolling with keyboard control keys. Suport horizontal and vertical scrolling for blocks in best visual position.
-
No limits to use scroll. Use horizontal scroll in own projects with Metro style. Or use vertical scroll, as well as combine both.
-
Only one instance of object DragOn will support Scrolling for all child blocks.
-
Plug-in to changing scrollbars style bar-on.js Do not created any wrappers for scrolled block. Only two auxiliary blocks will created for object BarOn. Only one instance of object BarOn will support Scrollbars for all child blocks.
Bars style fully specified in CSS. Worked under model of scroll event. </p> <p> Primary scrollbars change: Scrollbar will be located on the border of the visible part of the block. Even if the bottom block is beyond the boundaries of the parent. </p> </li> <li> <h2>Smoth pagination plugin (in developing)</h2> <p> Smoth automatic scroll to anchor in contents. Anchors works without any plugin, but is not smoth. </p> </li> <li> <h2>Touch scroll (in developing)</h2> <p> Use default touch action for scrolling content on tablet. Smart touch scrolling in development. </p> </li>
<head>
...
<script src="//code.jquery.com/jquery-latest.js"></script>
<script src="[path]/drag-on.js"></script>
...
</head>
<body class='dragon'>
[content]
</body>
Add once a class "dragon" to the <body> block or any other blocks. All block elements with active scrolling inside root element with a class "dragon", will be connected. All content who inserted later into any child block will be connected too.
Be careful.
Event capturing mousedown,scroll or keydown, between the root and the block
with scrolling, probably forbid smart scrolling.
In this case, you can assign multiple nested root blocks.
<script>
$( function(){
$( [selector] ).dragOn([options]);
});
</script>
Options is [:object:{['name':'value'],...}] replace default values of DragOn.
cursor — [:text - def: 'all-scroll'] You can setup mouse cursor over scrolable content.
exclusion — [ :object:{['tagName':''],...} - def: {'input':'', 'textarea':'', 'select':'', 'object':''}] This is the object in which the field names are the names of the tags. These tags will be excluded from processing. Anchor tag <A> is processed separately.
easing — [:boolean - def: true] Easing of acceleration after end dragging.
'DragOn.toggle' - enable/disable functionality of DragOn (include plug-ins).
'DragOn.remove' - destroy DragOn object.
Use: $( [selector] ).trigger('DragOn.toggle');
<head>
...
<script src="//code.jquery.com/jquery-latest.js"></script>
<script src="[path]/drag-on.js"></script>
<script src="[path]/bar-on.js"></script>
...
</head>
<body class='dragon'>
[content]
</body>
Include the bar-on.js in header and all block with class "dragon" will be with unique scrollbars. Scrollbars will show for all block elements with active scrolling inside root element with a class "dragon". All content who inserted later into any child block will be connected too.
'BarOn.toggle' - enable/disable functionality of BarOn.
'BarOn.remove' - destroy BarOn object.
Use:
$( [selector] ).trigger('BarOn.toggle');
.rBarOn,.bBarOn {
display: block;
z-index: 3;
background-color: red;
border-radius:2px;
opacity:.75;
}
.rBarOn {
width: 4px;
border-left: 2px white solid;
margin-right:2px;
}
.bBarOn {
height: 4px;
border-top: 2px white solid;
margin-bottom:2px;
}
.rBarOn:hover {
width: 12px;
border-left: 2px white solid;
border-radius:6px;
}
.bBarOn:hover {
height: 12px;
border-top: 2px white solid;
border-radius:6px;
}