Mousecase is a JavaScript utility supporting touch-like horizontal scrolling with a mouse! It is a no-nonsense, 0 dependency JavaScript plugin that solves 1 use case:
Scrolling a horizontal browser window plain with a mouse without using a scrollbar.
Being able to horizontally scroll is a default behavior on phones and with trackpads. With Mousecase, the archaic computer mouse pad can keep up! Yay. Users can click down on their computer mouse pad and drag scrollable horizontal browser window content without a scrollbar. This utility can help remove the need to implement a slider or carousel thingy. Therefore, it basically saves lives!
Install it!
yarn mousecase -DUse it!
import mouseCase from 'mousecase'
const mousecase = mouseCase('some-selector')
mousecase.init()That's it! Are you happier now that your customer can scroll horizontal web browser interfaces with a mouse pad just like they are on their phone? I hope so. If not, I'm not a shrink so I can't help you but I empathize—life's tough.
Listed below is the small API that Mousecase provides to use it.
MouseCase itself is a factory that takes in 2 arguments.
target an string or node that is selected to use mousecase; is required
ex:
mouseCase('some-target')
options: {object} containing plugin config
ex:
mouseCase('some-target', { cssClass: 'mousecase-fun' })
-
activeClassthe css class added to the mousecase target element when mousecase is active -
cssClass: the css class added to the mousecase target element -
elthe formatted target element -
rule: a boolean rule that defines whether mousecase should run (or not) -
all
propsare added as defaults if not provided during setup
init() initiates mousecase (setup).
ex:
someMouseCaseInstance.init()
on() turns mousecase back on (after initiation)
ex:
someMouseCaseInstance.on()
off() turns mousecase off (after initiation)
ex:
someMouseCaseInstance.off()
- There are other methods used within Mousecase but not intended for general use
Listed below is a basic Mousecase demo. Feel free to share more.