jquery-overflowandroid

Implement the inertia scroll for `overflow` element. And the polyfill for `overflow:scroll` / `overflow:auto` and `element.scrollLeft` / `element.scrollTop` on Android browser.

Usage no npm install needed!

<script type="module">
  import jqueryOverflowandroid from 'https://cdn.skypack.dev/jquery-overflowandroid';
</script>

README

jQuery.overflowAndroid

npm GitHub issues David license

The jQuery plugin that is wrapper of OverflowAndroid.
The polyfill for overflow:scroll / overflow:auto and element.scrollLeft / element.scrollTop on Android browser.

ss-01

Android browser has problems as below:

  • overflow:scroll and overflow:auto don't work on Android 2.x. The elements don't accept scroll operations (swipe, flick, drag, etc.).
  • element.scrollLeft and element.scrollTop don't work on Android 4.0.x. The elements can't scroll via JavaScript. Strange to say, the element that is set overflow:hidden can scroll. But of course that element doesn't accept scroll operations.

OverflowAndroid solves above problems both.

See DEMO and more information

Usage

Hammer.js is required.

<script src="hammer.min.js"></script>
<script src="jquery-2.1.1.min.js"></script>
<script src="jquery.overflowandroid.min.js"></script>

<!-- This `overflow:auto` isn't necessary. It works on desktop PC as native. -->
<div class="view" style="overflow: auto; width: 300px; height: 300px;">   <!-- Like an iframe window -->
  <img src="photo.jpg" width="900" height="600" alt="sample">             <!-- Like an iframe document -->
</div>

var element = $('.view').overflowAndroid();
// Now, the element accepts scroll operations (swipe, flick, drag, etc.).

// And it can scroll via scrollLeft/scrollTop. Therefore animate() method works.
element.animate({scrollLeft: 360, scrollTop: 150}, 1200);

// OverflowAndroid instance can be got via data('overflowAndroid') method.
element.data('overflowAndroid').scrollLeft(100);

See DEMO and more information