https://github.com/chenghaoc/scrollbear

A modern tool that maintains scroll position when images loaded
https://github.com/chenghaoc/scrollbear

dom javascript view

Last synced: 2 months ago
JSON representation

A modern tool that maintains scroll position when images loaded

• Host: GitHub
• URL: https://github.com/chenghaoc/scrollbear
• Owner: chenghaoc
• License: mit
• Created: 2016-04-10T14:33:11.000Z (almost 9 years ago)
• Default Branch: master
• Last Pushed: 2017-07-26T09:25:25.000Z (over 7 years ago)
• Last Synced: 2024-11-20T01:41:36.636Z (3 months ago)
• Topics: dom, javascript, view
• Language: JavaScript
• Homepage: https://glass-analytics.github.io/scrollbear/
• Size: 1.73 MB
• Stars: 516
• Watchers: 9
• Forks: 16
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# [Scrollbear](http://changbenny.github.io/scrollbear/)



  







[Scrollbear](http://changbenny.github.io/scrollbear/) is a tool that maintains the container scroll position when images loaded. Scrollbear is suitable in blog platforms where exist many photos and images. When images loaded, the scroll position will *jump* and cause a unfriendly experience. Scrollbear will trace the container height and maintain the scroll position when the images loaded and container height change.

** Since Google Chrome launch scolling anchor feature, there's no difference with or without Scrollbear in Chrome browser.

## [Demo](http://changbenny.github.io/scrollbear/demo/static_img.html)

## Installation

`npm install scrollbear`

## Usage

```html



    


        
long content

        
long content

    



```

```javascript

Scrollbear.start(document.getElementById('scroll'))

```

## API

#### Scrollbear.start(target, [changedItems])

`target` is the DOM where scroll bar exists (Normally is the container of contents), normally the direct child node of this target will be a DOM with really long content (such as the content of blog articles).

`changeItems` is optional. It is useful when images is lazy loading into your page. In such case, you can specify the *placeholder* of images. When images is lazy-loaded, the height of placeholder will change, and trigger the Scrollbear to justify the scroll position.

#### Scrollbear.stop()

#### Scrollbear.onChange(callback)

`callback` function will be called when Scrollbear detects container height changes and adjust the scroll position. The first param of `callback` will be the target which height changed. 

## Development

Install development dependency

```sh

npm install

```

Build

```sh

gulp

```

Test

```

npm test

```

## Contribute

Issues or PR are all Welcome!

## License

MIT