頁面區域滾動IScroll插件

iScroll 滾動 插件的簡單使用

我們經常會 遇到這個一種 布局 , header 和 footer 是固定 的, 中間的 内容是可滾動的 , 在 iOS 中 直接 可能 用 table 控件來實作 , 但是 在H5中 我們 就很 尴尬了 , 要實作 一大堆的 樣式 布局 , 不要 着急 , 曆史上的定論, 越是 複雜的 情況 , 越是用 “大牛” 去 研究 , 這不 念介紹的 iScroll就是解決這種布局的 實踐

下面就一起來看看這個插件的簡單使用:

iScroll

一款實作上下 欄的 庫

要點:

1.布局

<header></header>
<div id = "wrapper">
    <div>
        <span>下拉重新整理</span>
        <ul>
            <li>資料</li>
            <li>資料</li>
        </ul>
        <span>上拉加載</span>
    </div>
</div>
<footer></footer>
           

2.樣式

<style type="text/css">
    *{
        margin: 0;
        padding: 0;
    }
    body{
        background: green;
    }

    #wrapper{
        width: 100%;
        position: absolute;
        top: 50px;
        bottom: 50px;
        overflow: hidden;
    }
    ul{
        list-style: none;
        background: white;
    }
    ul li{
        line-height: 50px;
        text-indent: 40px;
        font-size: 40px;
    }

    header{
        width: 100%;
        height: 50px;
        position: absolute;
        top: 0;
        left: 0;
        background: blue;
    }
    footer{
        width: 100%;
        height: 50px;
        position: absolute;
        bottom: 0;
        left: 0;
        background: yellow;
    }
    /*設定  span*/
    span{
        width: 100%;
        height: 50px;
        /*僅僅是 字型的 地方*/
        background: transparent;
        font-size: 100px;
        text-align: center;
        color: red;
    }
    span:first-child{
        position: absolute;
        top: -100px;
    }
    span:last-child{
        position: absolute;
        bottom: -100px;
    }
</style>
           

3.相關 js

<!-- 引入 兩個重要的 js檔案 -->
<script type="text/javascript" src ="iscroll/build/jquery-2.1.1.min.js" ></script>
<script type="text/javascript" src ="iscroll/build/iscroll.js" ></script>           


           

4.js設定 調用 iscroll

<!-- 相關js -->
<script type="text/javascript">
    // 使用iscroll
    //iscroll 隻作用于 第一個子級元素
    //使用iscroll的區域 不允許 滾動(就是超出 區域  不滾動)
    var myIscroll = new IScroll("#wrapper",{
       scrollY: true, //允許滾動方向
        //允許 滾輪 , 預設false
        mouseWheel:true,
        //允許  滾動條出現 ,并 滾動 , 預設 false
        scrollbars:true,
        //滾動條 漸隐 漸現 , 預設 false
        fadeScrollbars:true
    });
</script>
           

5.效果圖

1)正常效果

2)下拉重新整理

3)上拉加載