https://github.com/nju33/hanko

Do various things at the scroll position
https://github.com/nju33/hanko

event handlers pure-javascript scroll

Last synced: 5 months ago
JSON representation

Do various things at the scroll position

• Host: GitHub
• URL: https://github.com/nju33/hanko
• Owner: nju33
• License: mit
• Created: 2017-03-25T17:23:14.000Z (about 9 years ago)
• Default Branch: master
• Last Pushed: 2017-04-15T04:20:56.000Z (about 9 years ago)
• Last Synced: 2025-01-23T00:14:46.314Z (over 1 year ago)
• Topics: event, handlers, pure-javascript, scroll
• Language: HTML
• Homepage: https://www.npmjs.com/package/hanko
• Size: 1.78 MB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE.md

Awesome Lists containing this project

README

          
# Hanko

[![XO code style](https://img.shields.io/badge/code_style-XO-5ed9c7.svg)](https://github.com/sindresorhus/xo)

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

Do various things at the scroll position.

![screenshot](https://github.com/nju33/hanko/raw/master/images/screenshot.gif?raw=true)

## Install or Download

```sh

yarn add hanko

npm i -S hanko

```

Or access to [releases page](https://github.com/nju33/hanko/releases).

Then, download the latest version.

## Usage

```html

...

...










Heading 2


```

```js

import Hanko from 'hanko';

window.addEventListener('DOMContentLoaded', () => {

  const els = document.getElementsByClassName('target');

  const hanko = new Hanko(els, {

    // Process every 20 milliseconds

    scrollWait: 20,

    // After completion of scrolling, once again after specified milliseconds

    resizeWait: 50

  });

  // Initialization

  hanko.init();

  // If you wanna use the following events

  for (const el of els) {

    // When entering the territory

    el.addEventListener('hankoenter', ev => {...});

    // When leaving the territory

    el.addEventListener('hankoleave', ev => {...});

    // When it becomes active

    el.addEventListener('hankoenterend', ev => {...});

    // When it becomes deactive

    el.addEventListener('hankoleaveend', ev => {...});

  }

  setTimeout(() => {

    // Deactivate all elements. (except for the `HTMLElement` element specified in `inoreElements`)

    hanko.leave([ignoreElements]);

    // Reset such as event

    hanko.teardown();

  }, 99999...)

});

```

### Example

- `test/fixtures/`

- `example/webpack/`

## LICENSE

The MIT License (MIT)

Copyright (c) 2017 nju33