A simple ember addon to preview the scroll progress of the page.

ember-scroll-preview

A simple ember addon to preview the scroll progress of the page.

Overview

Based on the page's scroll, the current view port position is highlighted and shown on the image of the entire page. This addon uses html2canvas to take screenshot of the whole page once it is rendered.

DEMO

Installation

  ember install ember-scroll-preview

Usage

  {{#ember-scroll-preview
    position="top-right"
    offsetTop=85
  }}
    <!-- application content -->
    {{outlet}}
  {{/ember-scroll-preview}}

Note: Add the component in the application template to get the scroll preview for all the routes accessed inside the application.

Parameters

• offsetTop to set the top offset based on the scroll container's top position inside the page.
• position to specify the position of the scroll preview container.

Available positions,

top left top-left left-top

bottom bottom-left left-bottom

right top-right right-top

bottom-right right-bottom

Collaborating on this project

Installation

• git clone <repository-url> this repository
• cd ember-scroll-preview
• npm install

Running the dummy app

• ember serve
• Visit your app at http://localhost:4200.

Running Tests

• npm test (Runs ember try:each to test your addon against multiple Ember versions)
• ember test
• ember test --server

Building

• ember build

For more information on using ember-cli, visit https://ember-cli.com/.

HomePage

https://github.com/gowthamrm/ember-scroll-preview#readme

Repository

git+https://github.com/gowthamrm/ember-scroll-preview.git

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562ce81e8991b448e018c