jQuery.cuteScroll

Responsive jQuery y-axis scroll plugin that supports touches, swipes, mouse events. Does not support overlapping elemens scrolling for now.

Installation

<script src="jquery.cutescroll.min.js"></script>

Configuration

jQuery.cuteScroll.defaults={
	bar:{
		// any css settings
		opacity:0.5,
		minHeight:'4rem',
		zIndex:110,
		////// settings
		class:'cuteScroll-bar',//default class name
	},
	rail:{
		// any css settings
		opacity:0.1,
		height:'100%',
		zIndex:100,
		////// settings
		visible:true,// Makes rail visible
		class:'cuteScroll-rail',//default class name
	},
	scroller:{// bar and rail will get these values if have no own
		// any css settings
		background:'black',
		width:'0.5rem',
		right:0,
		////// settings
		alwaysVisible:false,// if true, scroller becomes permanently visible
		hideDelay:1000,
		fadeOutSpeed:'slow',
		fadeInSpeed:'fast',
	},
	canvas:{//scrollable element
		// any css settings
		class:'cuteScroll-canvas',//default class name
	},
	wrapper:{
		// any css settings
		class:'cuteScroll-wrapper',//default class name
	},
	area:{// wrapper and canvas (scrollable element) will get these values if have no own
		// any css settings
		height:'20rem',// scrollable element height
		width:'100%',// scrollable element width
	},
	mouse:{
		pageScroll:true,// check if mousewheel should scroll the window if we reach top/bottom
		wheelStep:120,// scroll step for a wheel
	},
	touch:{
		moveFactor:1.1,// makes leaps faster (>1) or more slowly (<1)
		swipeStrengthFactor:1.25,// touch swipe strength coefficient
		swipeFadingFactor:0.075,// fading coefficient
		swipeVelocityThreshold:0.5,// touch movement velocity which is considered a swipe
		swipeDistanceThreshold:10,// touch movement distance to be considered a swipe
		swipeTimeAdjustmentThreshold:500,// recaltulates swipe parameters
		swipeIterationMinDistance:0.2,// min swipe iteration distance
		swipeIterationTimeout:5,// iteration timeout
	},
	//element:{}, - you can change properties of every element you want
	on:{// listeners and related settings
		contentChange:false,// expects a function which is called on content change
		contentChangeShowScroller:true,// show scroller on content change if it is reasonable
	},
	//priority:1,//defines overlapping priority, not supported for now
};
};

How To Use

All confuguration commands should be included in a command object to be recognized, as simple as this:

jQuery(element).cuteScroll({
	create:{// is the command object
		area:{
			// any css settings
			width:'100vw',
			height:'100vh'
		},
		element:{
			body:{
				// any css settings
				overflow:'hidden',
			}
		}
	}
});

Commands

• create:object - creates a scroller
• recreate:object - recreates a scroller
• update:object - updates settings
• jumpToTop:boolean - jumps to the top of a scrollable div if TRUE
• jumpToBottom:boolean - jumps to the bottom of a scrollable div if TRUE
• log:string - logs some message via console
• alert:string - alerts some message
• remove:boolean - removes a scroller if TRUE

AddClass, removeClass

You can add or remove any class of a scroller element. All changes will be reversed on the remove command

jQuery(element).cuteScroll({
	create:{// is the command object
		bar:{
			// any css settings
			addClass:'newMyBarClass'
			removeClass:'formerMyBarClass'
		},
		area:{
			// any css settings
			width:'100vw',
			height:'100vh'
		},
	}
});

Editing Other Elements

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

jQuery(element).cuteScroll({
	update:{// is the command object
		'someTag':{
			// any css settings
			background:'pink',
		},
		'.someClass':{
			// any css settings
			addClass:'newClass'
			removeClass:'formerClass'
		},
		'#someId':{
			// any css settings
			background:'blue',
		},
	}
});

Listeners

on.contentChange

Expects a function which will be called on a scrollable element content change

jQuery(element).cuteScroll({
	create:{// is the command object
		on:{
			contentChange:function(e){// e - is the scrollable element jQuery object
				e.cuteScroll({
					update:{
						jumpToTop:true
					}
				})
			}
		}
	}
});

Demo

Presentation of the index.html file