https://github.com/appleple/scroll-hint

A JS library to suggest that the elements are scrollable horizontally, with the pointer icon.
https://github.com/appleple/scroll-hint

es6 js npm ui

Last synced: 2 days ago
JSON representation

A JS library to suggest that the elements are scrollable horizontally, with the pointer icon.

• Host: GitHub
• URL: https://github.com/appleple/scroll-hint
• Owner: appleple
• License: mit
• Created: 2018-05-01T08:45:41.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2024-11-21T02:35:01.000Z (2 months ago)
• Last Synced: 2025-01-13T01:03:24.065Z (9 days ago)
• Topics: es6, js, npm, ui
• Language: JavaScript
• Homepage: https://appleple.github.io/scroll-hint/
• Size: 952 KB
• Stars: 344
• Watchers: 15
• Forks: 35
• Open Issues: 17
• Metadata Files:
  • Readme: readme.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# ScrollHint

Suggests that the elements are scrollable horizontally, with the `pointer icon`.



## Installation

### via npm

```sh

npm install scroll-hint --save

```

### via yarn

```sh

yarn add scroll-hint

```

### via cdn

```html

```

## Usage

import the js with babel and Browserify/Webpack

```js

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

  

  

    scrollHintShadowWrapClass

    scroll-hint-shadow-wrap

    Class name added to the wrapper element for shadow effects

  

  

    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

  

  

    offset

    0

    You can change criteria for scrollable.

  

  

    i18n.scrollable

    scrollable

    You can change the scrollable text from here