Android Style Overscroll Effect In jQuery - Anscroll.js

Android Style Overscroll Effect In jQuery - Anscroll.js

Anscroll.js is a jQuery plugin that makes use of CSS3 transforms to create an Android inspired bounce overscroll effect in your mobile and desktop web app.

1. Download the zip, then upload the anscroll.js and anscroll.png to the server.

2. Link to jQuery library and the anscroll.js script.

<script src="https://code.jquery.com/jquery-3.2.1.min.js" 
        integrity="sha384-xBuQ/xzmlsLoJpyjoggmTEz8OWUFM0/RC5BsqQBDX2v5cMvDHcMakNTNrHIW2I5f" 
        crossorigin="anonymous">
</script>
<script src="anscroll.js"></script>

3. Make sure you web page is scrollable.

<div class="container">
  Scroll down!
  More content here
</div>
.container {
  min-height: 200vh;
}

4. Override the default styles of the overscroll effect in the CSS as these:

#topScroll {
  transform: rotate(180deg);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 20px;
}
#bottomScroll {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 20px;
}

This awesome jQuery plugin is developed by pjtsearch. For more Advanced Usages, please check the demo page or visit the official website.

  • Publication date: 28.10.2017
  • Source