Dragon - smart scrolling jQuery plugin. Ajust scroll mechanics and customize scroll bar.
-
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.
Primary scrollbars change: Scrollbar will be located near the visible border of the block. Even if the bottom block is beyond the boundaries of the parent.
-
Smoth automatic scroll to anchor in contents. Anchors works without any plugin, but is not smoth.
-
Scroll content in all direction. Propagate not ended event to parent block.
<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.
Example:
$('body').dragOn({cursor:'pointer',easing:false,exclusion:{input:'',select:'',id:'#gmap,#map-canvas'}});
'DragOn.option' - set/get DragOn parameters.
'DragOn.toggle' - enable/disable functionality of DragOn (include plug-ins).
'DragOn.remove' - destroy DragOn object.
Trigger can be initialized on DragOn root or any children block.
Usage: $( [selector] ).trigger('DragOn.toggle'); //toggle state
$( [selector] ).trigger('DragOn.option',[{easing:false}]); //turn off easing
$( [selector] ).triggerHandler('DragOn.option',['easing']); //return easing state
Block with attribute data-overflow="no-dragon" will be bypassed. Event 'mousewheel' will be sent to him.
Usage:
<body class='dragon'>
[content]
<div data-overflow="no-dragon">
[content]
</div>
[content]
</body>
<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 baron'>
[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.
Trigger can be initialized on BarOn root or any children block.
Usage:
$( [selector] ).trigger('BarOn.toggle');
Block with attribute data-overflow-x="no-baron" will stay default horizontal scrollbar.
Block with attribute data-overflow-y="no-baron" will stay default vertical scroll bar .
Usage:
< body class='dragon baron'>
[content]
<div data-overflow-x="no-baron" data-overflow-y="no-baron">
[content]
</div>
[content]
</body>
.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;
}
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent