appleple / Scroll Hint
Licence: mit
A JS library to suggest that the elements are scrollable horizontally, with the pointer icon.
Stars: ✭ 305
Programming Languages
Projects that are alternatives of or similar to Scroll Hint
Thanks
🙌 Give thanks to the open source maintainers you depend on! ✨
Stars: ✭ 2,753 (+802.62%)
Mutual labels: npm
Arcgis Js Api
Minified version of the ArcGIS API for JavaScript
Stars: ✭ 290 (-4.92%)
Mutual labels: npm
Apify Js
Apify SDK — The scalable web scraping and crawling library for JavaScript/Node.js. Enables development of data extraction and web automation jobs (not only) with headless Chrome and Puppeteer.
Stars: ✭ 3,154 (+934.1%)
Mutual labels: npm
Input Range Scss
Styling Cross-Browser Compatible Range Inputs with Sass
Stars: ✭ 272 (-10.82%)
Mutual labels: npm
Tooltip Sequence
A simple step by step tooltip helper for any site
Stars: ✭ 287 (-5.9%)
Mutual labels: npm
Multiple Dates Picker For Jquery Ui
MDP is a little plugin that enables jQuery UI calendar to manage multiple dates.
Stars: ✭ 256 (-16.07%)
Mutual labels: npm
Iot 433mhz
🌐 IoT System to control 433 MHz RC power sockets, PIR, Door Sensors and much more.
Stars: ✭ 301 (-1.31%)
Mutual labels: npm
Advanced Nodejs
For help, ask in #questions at slack.jscomplete.com
Stars: ✭ 273 (-10.49%)
Mutual labels: npm
Quickfix
The best stupid idea for fixing problems in node modules.
Stars: ✭ 267 (-12.46%)
Mutual labels: npm
Draggable Vue Directive
Vue2 directive that handles drag & drop
Stars: ✭ 286 (-6.23%)
Mutual labels: npm
React Cookie Consent
A small, simple and customizable cookie consent bar for use in React applications.
Stars: ✭ 293 (-3.93%)
Mutual labels: npm
Pacote
programmatic npm package and metadata downloader (moved!)
Stars: ✭ 281 (-7.87%)
Mutual labels: npm
Windows Build Tools
📦 Install C++ Build Tools for Windows using npm
Stars: ✭ 3,280 (+975.41%)
Mutual labels: npm
Lookforward
A small library that helps you to create smooth transitions between pages with the easiest way
Stars: ✭ 298 (-2.3%)
Mutual labels: npm
Express React Fullstack
Simple, Useful Full Stack Express and React Application
Stars: ✭ 286 (-6.23%)
Mutual labels: npm
ScrollHint
Suggests that the elements are scrollable horizontally, with the pointer icon.
Installation
via npm
npm install scroll-hint --save
via yarn
yarn add scroll-hint
via cdn
<link rel="stylesheet" href="https://unpkg.com/[email protected]/css/scroll-hint.css">
<script src="https://unpkg.com/[email protected]/js/scroll-hint.js"></script>
Usage
import the js with babel and Browserify/Webpack
import ScrollHint from 'scroll-hint';
new ScrollHint('.js-scrollable');
Option
| Name | Default | Description |
|---|---|---|
suggestClass |
is-active | Classname to be added when the element is scrolled-in |
scrollableClass |
is-scrollable | Classname to be added when the element is scrollable |
scrollableRightClass |
is-right-scrollable | Classname to be added when the element is right-scrollable |
scrollableLeftClass |
is-left-scrollable | Classname to be added when the element is left-scrollable |
scrollHintClass |
scroll-hint | Classname to be added to the element |
scrollHintIconClass |
scroll-hint-icon | Classname to be added to the icon |
scrollHintIconAppendClass |
scroll-hint-icon-white | Another classname to be added to the element's icon |
scrollHintIconWrapClass |
scroll-hint-icon-wrap | Classname to be added to the icon's wrapper |
scrollHintText |
scroll-hint-text | Classname to be added to the text |
remainingTime |
-1 | When to hide scroll-hint icon (ms) |
scrollHintBorderWidth |
10 | Shadowbox border width of the element |
enableOverflowScrolling |
true | When using iOS and the value is true, -webkit-overflow-scrolling property will be added to the element |
suggestiveShadow |
false | Show suggestive shadow, when the element is scrollable |
applyToParents |
false | Apply JavaScript to the parent element |
i18n.scrollable |
scrollable | You can change the scrollable text from here |
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].