Skip to content
A modern tool that maintains scroll position when images loaded
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
build
demo
src
test
.babelrc
.gitignore
.jscsrc
.travis.yml
LICENSE
README.md
gulpfile.js
package.json

README.md

Scrollbear

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

Installation

npm install scrollbear

Usage

<div id='scroll' style='overflow: scroll;'>
    <div id='container'>
        <p>long content</p>
        <p>long content</p>
    </div>
</div>
<script src='scrollbear.js'></script>
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

npm install

Build

gulp

Test

npm test

Contribute

Issues or PR are all Welcome!

License

MIT

You can’t perform that action at this time.