Skip to content

Commit 000030c

Browse files
author
MerryPanda
committed
new version
1 parent 9f6f453 commit 000030c

File tree

4 files changed

+1034
-105
lines changed

4 files changed

+1034
-105
lines changed

‎README.md‎

Lines changed: 133 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -1,70 +1,148 @@
11
# jQuery.cuteScroll
22
Responsive jQuery y-axis scroll plugin that supports touches, swipes, mouse events.
3-
Does not support overlapping elemens scrolling.
3+
Does not support overlapping elemens scrolling for now.
44

5-
### Installation
5+
## Installation
66
```html
77
<script src="jquery.cutescroll.min.js"></script>
88
```
9-
### Configuration
9+
10+
## Configuration
1011
```javascript
1112
jQuery.cuteScroll.defaults={
12-
barColor:'black',// bar default color
13-
barHeight:false,// if has a value, won't be dynamically changed
14-
barWidth:false,// if empty, uses scrollerWidth
15-
barMinHeight:'6rem',
16-
barMaxHeight:'auto',
17-
barOpacity:0.4,
18-
barBorderRadius:'1rem',
19-
barDraggable:true,// allows to drag the bar
20-
barClass:'cuteScroll-bar', // default bar class
21-
22-
railColor:'black',//rail default color
23-
railWidth:false,// if not defined, uses scrollerWidth
24-
railIndent:false,// if not defined, uses scrollerIndent
25-
railOpacity:0.1,
26-
railBorderRadius:'1rem',
27-
railVisible:false,// Makes rail visible
28-
railClass:'cuteScroll-rail',// default rail class
29-
30-
scrollerIndent:'0.1rem',// scroller edge indent
31-
scrollerPosition:'right',// side position -> scrollerPosition: right|left
32-
scrollerWidth:'0.4rem',
33-
scrollerAlwaysVisible:false,// if true, scroller becomes permanently visible
34-
scrollerHideDelay:1000,
35-
scrollerFadeOutSpeed:'slow',
36-
scrollerFadeInSpeed:'fast',
13+
bar:{
14+
// any css settings
15+
opacity:0.5,
16+
minHeight:'4rem',
17+
zIndex:110,
18+
////// settings
19+
class:'cuteScroll-bar',//default class name
20+
},
21+
rail:{
22+
// any css settings
23+
opacity:0.1,
24+
height:'100%',
25+
zIndex:100,
26+
////// settings
27+
visible:true,// Makes rail visible
28+
class:'cuteScroll-rail',//default class name
29+
},
30+
scroller:{// bar and rail will get these values if have no own
31+
// any css settings
32+
background:'black',
33+
width:'0.5rem',
34+
right:0,
35+
////// settings
36+
alwaysVisible:false,// if true, scroller becomes permanently visible
37+
hideDelay:1000,
38+
fadeOutSpeed:'slow',
39+
fadeInSpeed:'fast',
40+
},
41+
canvas:{//scrollable element
42+
// any css settings
43+
class:'cuteScroll-canvas',//default class name
44+
},
45+
wrapper:{
46+
// any css settings
47+
class:'cuteScroll-wrapper',//default class name
48+
},
49+
area:{// wrapper and canvas (scrollable element) will get these values if have no own
50+
// any css settings
51+
height:'20rem',// scrollable element height
52+
width:'100%',// scrollable element width
53+
},
54+
mouse:{
55+
pageScroll:true,// check if mousewheel should scroll the window if we reach top/bottom
56+
wheelStep:120,// scroll step for a wheel
57+
},
58+
touch:{
59+
moveFactor:1.1,// makes leaps faster (>1) or more slowly (<1)
60+
swipeStrengthFactor:1.25,// touch swipe strength coefficient
61+
swipeFadingFactor:0.075,// fading coefficient
62+
swipeVelocityThreshold:0.5,// touch movement velocity which is considered a swipe
63+
swipeDistanceThreshold:10,// touch movement distance to be considered a swipe
64+
swipeTimeAdjustmentThreshold:500,// recaltulates swipe parameters
65+
swipeIterationMinDistance:0.2,// min swipe iteration distance
66+
swipeIterationTimeout:5,// iteration timeout
67+
},
68+
//element:{}, - you can change properties of every element you want
69+
on:{//related to events
70+
contentChange:false,// expects function which is called on content change -> onContentChange: <function>
71+
contentChangeShowScroller:true,// show scroller on content change if it is reasonable
72+
},
73+
//priority:1,//defines overlapping priority, not supported for now
74+
};
75+
```
3776

38-
pageScroll:true,// check if mousewheel should scroll the window if we reach top/bottom
39-
wheelStep:120,// scroll step for wheel
77+
## How To Use
78+
All confuguration commands should be passed included in a command object, as simple as this:
79+
```javascript
80+
jQuery.cuteScroll({
81+
create:{// is the command object
82+
area:{
83+
// any css settings
84+
width:'100vw',
85+
height:'100vh'
86+
},
87+
element:{
88+
body:{
89+
// any css settings
90+
overflow:'hidden',
91+
}
92+
}
93+
}
94+
});
95+
```
4096

41-
touchSwipeStrengthFactor:1.25,// touch swipe strength coefficient
42-
touchSwipeFadingFactor:0.075,// fading coefficient
43-
touchSwipeVelocityThreshold:0.5,// touch movement velocity which is considered a swipe
44-
touchSwipeDistanceThreshold:10,// touch movement distance to be considered a swipe
45-
touchSwipeTimeAdjustmentThreshold:500,// recaltulates swipe parameters
46-
touchSwipeIterationMinDistance:0.2,// min swipe iteration distance
47-
touchSwipeIterationTimeout:5,// iteration timeout
48-
touchMoveFactor:1.1,// makes leaps faster (>1) or more slowly (<1)
97+
### Commands
98+
- create:<object> - creates a scroller
99+
- recreate:<object> - recreates a scroller
100+
- update:<object> - updates settings
101+
- jumpToTop:<boolean> - jumps to the top of a scrollable div if TRUE
102+
- jumpToBottom:<boolean> - jumps to the top of a scrollable div if TRUE
103+
- log:<string> - logs some message
104+
- alert:<string> - alerts some message
105+
- remove:<boolean> - removes a scroller if TRUE
49106

50-
height:'20rem',// scrollable element height
51-
width:'100%',// scrollable element width
52-
addClass:false,// adds classes to scrollable element on initialization -> addClass: <string>
53-
removeClass:false,// removes classes of scrollable element on remove -> removeClass: <string>
54-
addCss:false,// adds css on initialization
55-
removeCss:false,// removes css on remove command, may use the same data as addCss
107+
### AddClass, removeClass
108+
You can add or remove any class of a scroller element. All changes will be reversed on the remove command
109+
```javascript
110+
jQuery.cuteScroll({
111+
create:{// is the command object
112+
bar:{
113+
// any css settings
114+
addClass:'newMyBarClass'
115+
removeClass:'formerMyBarClass'
116+
},
117+
area:{
118+
// any css settings
119+
width:'100vw',
120+
height:'100vh'
121+
},
122+
}
123+
});
124+
```
56125

57-
wrapperClass:'cuteScroll-wrapper',// default wrapper class
58-
//callbacks and related settings:
59-
onContentChange:false,// expects function which is called on content change -> onContentChange: <function>
60-
onContentChangeShow:true,// show scroller on content change if it is reasonable
61-
//commands:
62-
remove:false,// removes scroller, restores previous scrollable element style
63-
jumpToTop:false,// jumps to the top of the scrollable element
64-
jumpToBottom:false,// jumps to the bottom of the scrollable element
65-
alert:false,// allerts a message -> alert: <string>
66-
};
126+
### Editing Other Elements
127+
You can also edit other elements properties by tag, class or id name or just change their css values. All changes will be reversed on the remove command
128+
```javascript
129+
jQuery.cuteScroll({
130+
update:{// is the command object
131+
element:{
132+
'myElementClass':{
133+
// any css settings
134+
height:'100rem',
135+
background:'red',
136+
addClass:'classNameToAdd'
137+
},
138+
'myOtherElementClass':{
139+
// any css settings
140+
removeClass:'classNameToRemove'
141+
}
142+
}
143+
}
144+
});
67145
```
68-
### Demo
69146

147+
## Demo
70148
[Presentation of the index.html file](https://merrypanda.github.io/jQuery.cuteScroll)

‎index.html‎

Lines changed: 104 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -11,85 +11,140 @@
1111
<style>
1212
body {margin:0; font-family:'Open Sans';}
1313
.flex{display:flex; flex-wrap:wrap; width:100%;}
14-
.something{width:100%; height:100rem; background:LightSkyBlue;}
15-
.box {min-width:10rem; height:10rem; flex-grow:1;}
16-
.btn {display:flex; width:8rem; height:4rem; justify-content:center; align-items:center; flex-grow:1; cursor:pointer;}
14+
.something{width:100%; height:100rem; background:green;}
15+
.box {width:6rem; height:6rem; flex-grow:1;}
16+
.btn {display:flex; margin:1rem; justify-content:center; align-items:center; flex-grow:1; cursor:pointer;}
1717
</style>
1818

1919
<script>
20+
var scroll='.scroll';
21+
var scrollbox='.scrollbox';
22+
var all='.scroll, .scrollbox';
2023
var css={body:{overflow:'hidden'}};
2124
//////
22-
function removeAnd(i){
23-
return jQuery(i).cuteScroll({remove:true, removeCss:css});
24-
}
2525
function randomColor(){
2626
return '#'+Math.floor(Math.random()*16777215).toString(16);
2727
}
2828
//////
2929
function b_full(){
30-
removeAnd('.scroll').cuteScroll({
31-
width:'100vw',
32-
height:'100vh',
33-
scrollerAlwaysVisible:true,
34-
railVisible:true,
35-
addCss:css,
30+
jQuery(scroll).cuteScroll({
31+
recreate:{
32+
area:{
33+
width:'100vw',
34+
height:'100vh',
35+
},
36+
scroller:{
37+
addClass:'someclass',
38+
alwaysVisible:true,
39+
},
40+
element:{
41+
body:{
42+
overflow:'hidden',
43+
}
44+
},
45+
},
3646
});
37-
console.log('full page');
3847
};
39-
function b_40rem(){
40-
var c=randomColor();
41-
42-
removeAnd('.scroll').cuteScroll({
43-
width:'100%',
44-
height:'40rem',
45-
barWidth:'2rem',
46-
barHeight:'2rem',
47-
barMinHeight:false,
48-
barColor:c,
49-
railColor:c,
50-
barOpacity:1,
51-
railOpacity:1,
52-
railBorderRadius:0,
53-
barBorderRadius:'1rem',
54-
railWidth:'0.1rem',
55-
railIndent:'1.05rem',
56-
scrollerAlwaysVisible:true,
57-
railVisible:true,
48+
function b_many(){
49+
jQuery(scrollbox).cuteScroll({
50+
recreate:{
51+
area:{
52+
width:'90vw',
53+
height:'25vh',
54+
},
55+
scroller:{
56+
alwaysVisible:true,
57+
},
58+
priority:10,
59+
},
5860
});
59-
console.log('40rem height');
6061
};
61-
function b_bott(){
62-
jQuery('.scroll').cuteScroll({
63-
jumpToBottom:true,
62+
function style_dot(){
63+
jQuery(all).cuteScroll({
64+
update:{
65+
bar:{
66+
width:'2rem',
67+
height:'2rem',
68+
minHeight:'',
69+
right:'0.1rem',
70+
borderRadius:'1rem',
71+
},
72+
rail:{
73+
width:'0.1rem',
74+
right:'1.05rem',
75+
//visible:true,
76+
},
77+
scroller:{
78+
opacity:1,
79+
},
80+
},
81+
});
82+
}
83+
function rand(){
84+
jQuery(all).cuteScroll({
85+
update:{
86+
bar:{
87+
background:randomColor(),
88+
},
89+
rail:{
90+
background:randomColor(),
91+
},
92+
},
93+
});
94+
}
95+
function b_50(){
96+
jQuery(scroll).cuteScroll({
97+
recreate:{
98+
rail:{
99+
visible:false,
100+
},
101+
scroller:{
102+
//alwaysVisible:true,
103+
},
104+
area:{
105+
height:'50vh'
106+
}
107+
}
64108
});
65-
console.log('jump to bottom');
66109
};
110+
function b_bott(){
111+
jQuery(all).cuteScroll({jumpToBottom:true});
112+
}
113+
function b_top(){
114+
jQuery(all).cuteScroll({jumpToTop:true});
115+
}
67116
function b_remove(){
68-
removeAnd('.scroll')
69-
70-
console.log('removed');
71-
};
72-
function moreBlocks(){
73-
var o=jQuery('.content');
117+
jQuery(all).cuteScroll({remove:true});
118+
}
119+
function moreBlocks(e){
120+
var s='';
121+
122+
for(var q=60; q>0; q--) s+=`<div class=box style="background:${randomColor()}"></div>`;
74123

75-
for(var q=50; q>0; q--) o.append(`<div class=box style="background:${randomColor()}"></div>`)
124+
jQuery(e).append(`<div class="flex scrollbox">${s}</div>`);
125+
}
126+
function MoreBlocksForContent(){
127+
moreBlocks('.content');
76128
}
77129
window.onload=function(){
78-
moreBlocks();
130+
MoreBlocksForContent();
79131
};
80132
</script>
81133
</head>
82134
<body>
83135
<div class=scroll>
84136
<div class=flex>
85-
<div class=btn onclick=b_full()>Full Page Scrollable</div>
86-
<div class=btn onclick=b_40rem()>40rem Height</div>
137+
<div class=btn onclick=b_full()>Full Page</div>
138+
<div class=btn onclick=b_50()>50vh Height</div>
139+
<div class=btn onclick=b_many()>Many Scrollers</div>
140+
<div class=btn onclick=style_dot()>Dot Style</div>
141+
<div class=btn onclick=rand()>Random Color</div>
142+
<div class=btn onclick=b_top()>Jump To Top</div>
87143
<div class=btn onclick=b_bott()>Jump To Bottom</div>
88144
<div class=btn onclick=b_remove()>Remove Scroller</div>
89-
<div class=btn onclick=moreBlocks()>Add More Blocks</div>
145+
<div class=btn onclick="MoreBlocksForContent()">Add More Blocks</div>
90146
</div>
91147
<div class="flex content"></div>
92148
</div>
93-
<div class=something></div>
94149
</body>
95150
</html>

0 commit comments

Comments
 (0)