preventoverscrolljs's Introduction

preventoverscrolljs

使用

页面布局

<body id="wrapper">
    <div id="container"></div>
</body>

引用组件

引用组件支持下面两种方式：

clone之后直接拷贝引用bin文件夹下面的preventoverscroll.min.js
从npm下载安装
- npm install --save preventoverscrolljs
- var PreventOverScroll = require('preventoverscrolljs');

设置样式

不少人反馈用了这个组件之后不能滑动，其实是样式没有写好。按照上面的布局，你的样式应该包含下面这段：

    html, body {
        width: 100%;
        height: 100%;
    }
    #container {
        height: 100%;
    }

实例化组件

var list = ['container'];
var prevent = new PreventOverScroll({
    list: list
});

区分安卓和IOS

因为安卓不支持原生的橡皮筋效果，而且安卓在div内的滑动效果很差，所以上述组件应该这样实例化：

var outer = (  isAndroid // do it yourself
             ? 'wrapper'
             : 'container' );
var list = [outer];
var prevent = new PreventOverScroll({
    list: list
});

TODO

上面的实例化过程很愚笨，不够智能，还需要完善，但不马上完善一定是因为要考虑足够多的应用场景。

preventoverscrolljs's Issues

1月19日更新后依旧无法滚动

按照你的说法，body，html，container添加了height:100%; 也用ua判断了android，还是在android无法上啦，主要原因代码41行， if (!_util.checkDeviceType('ios')), IOS直接return了。
if (!_util.checkDeviceType('ios'))
return;

    for (i = 0, il = list.length; i < il; i++) {
        item = doc.getElementById(list[i]);

        if (!item)
            throw '';

        item.className += that.config.cClass;
    }

我研读了一下你的代码，测试了一下Android，我觉得问题发生在这里：
line：100 if (scrollTop === 0)

ele.scrollTop永远是0

基本完美

刚开始接触微信webview开发，自己想了和网上找了很多方案都没法很好解决，这个方案很棒～收藏了，打算看看源码再深度定制下～感谢作者

js里自动添加到head里的样式少了个%

<style id="prevent_over_scroll_style">
.prevent_over_scroll_container{
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
} 
html, body {
  width: 100%; 
  height: 100;  /* 这里少了个% */
}
</style>

/example/simple/index.html 没有防露底

我下载了源码, 用一个基础配置的gulp文件把项目跑起来了，用手机微信和手机qq访问了/example/simple/index.html这个文件，发现并没有起到防露底的左右，用chrome dev大概看了下，没有报错，说明文档上的js文件，css样式，也都正常应用上了。是不是我理解有偏差？这么多star不应该啊

Recommend Projects