https://github.com/alphasights/ember-scrollable

A simple Ember wrapper around Trackpad Scroll Emulator
https://github.com/alphasights/ember-scrollable

Last synced: 5 days ago
JSON representation

A simple Ember wrapper around Trackpad Scroll Emulator

• Host: GitHub
• URL: https://github.com/alphasights/ember-scrollable
• Owner: alphasights
• License: mit
• Created: 2015-07-22T15:06:44.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2023-07-18T20:37:38.000Z (over 1 year ago)
• Last Synced: 2024-09-19T04:39:02.531Z (about 2 months ago)
• Language: JavaScript
• Size: 4.29 MB
• Stars: 24
• Watchers: 40
• Forks: 34
• Open Issues: 33
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
# Ember Scrollable

[![Ember Version](https://embadge.io/v1/badge.svg?start=2.8.0-lts)](https://embadge.io/v1/badge.svg?start=2.8.0-lts)

[![Npm Version](https://badge.fury.io/js/ember-scrollable.svg)](http://badge.fury.io/js/ember-scrollable)

[![Code

Climate](https://codeclimate.com/github/alphasights/ember-scrollable/badges/gpa.svg)](https://codeclimate.com/github/alphasights/ember-scrollable)

[![Build Status](https://travis-ci.org/alphasights/ember-scrollable.svg?branch=master)](https://travis-ci.org/alphasights/ember-scrollable)

A simple scrollbar implementation inspired by Trackpad Scroll Emulator.

[Check out the demo](https://alphasights.github.io/ember-scrollable)

Installation

------------------------------------------------------------------------------

* `ember install ember-scrollable`

## Basic Usage

```htmlbars

{{! app/templates/index.hbs }}

{{#ember-scrollable}}

  Some long content...

{{/ember-scrollable}}

```

## Configuring the Component

The component accepts the following options:

- `horizontal`: Enables horizontal scrolling (default: `false`)

- `vertical`: Enables vertical scrolling (default: `true` if horizontal is unset)

- `autoHide`: Enables auto hiding of the scrollbars on mouse out (default: `true`)

- `scrollTo`: Set this property to manually scroll to a certain position (if in single bar mode)

- `scrollToX`: Set this property to manually scroll to a certain position in the horizontal direction

- `scrollToY`: Set this property to manually scroll to a certain position in the vertical direction

- `onScroll(scrollOffset, event)`: action triggered whenever the user scrolls, called with the current `scrollOffset` and the original scroll `event`

- `onScrolledToBottom`: action triggered when user scrolled to the bottom

## Advanced Usage

```htmlbars

{{#ember-scrollable horizontal=true vertical=true}}

  content that is wide and long.

{{/ember-scrollable}}

```

## Developing

### Setup

* `git clone https://github.com/alphasights/ember-scrollable.git`

* `npm install && bower install`

### Running

* `ember server`

### Linting

* `npm run lint:js`

* `npm run lint:js -- --fix`

### Running tests

* `ember test` – Runs the test suite on the current Ember version

* `ember test --server` – Runs the test suite in "watch mode"

* `ember try:each` – Runs the test suite against multiple Ember versions

### Running the dummy application

* `ember serve`

* Visit the dummy application at [http://localhost:4200](http://localhost:4200).

For more information on using ember-cli, visit [https://ember-cli.com/](https://ember-cli.com/).

License

------------------------------------------------------------------------------

This project is licensed under the [MIT License](LICENSE.md).