iScroll——javascript滾動插件

時間 2019-11-17

標籤 iscroll javascript 滾動插件欄目 JavaScript 简体版

原文原文鏈接

iScroll是一個高性能，資源佔用少，無依賴，多平臺的javascript滾動插件。javascript

它能夠在桌面，移動設備和智能電視平臺上工做。它一直在大力優化性能和文件大小以便在新舊設備上提供最順暢的體驗。css

iScroll不單單是滾動。它能夠處理任何須要與用戶進行移動交互的元素。iScroll分爲了多個版本。html

目前有如下版本：java

iscroll.js，這個版本是常規應用的腳本。它包含大多數經常使用的功能，有很高的性能和很小的體積。
iscroll-lite.js，精簡版本。它不支持快速跳躍，滾動條，鼠標滾輪，快捷鍵綁定。但若是你所須要的是滾動(特別是在移動平臺) iScroll 精簡版 是又小又快的解決方案。
iscroll-probe.js，探查當前滾動位置是一個要求很高的任務,這就是爲何我決定創建一個專門的版本。若是你須要知道滾動位置在任何給定的時間,這是iScroll給你的。（我正在作更多的測試,這可能最終在常規iscroll.js腳本，請留意）。
iscroll-zoom.js，在標準滾動功能上增長縮放功能。
iscroll-infinite.js，能夠作無限緩存的滾動。處理很長的列表的元素爲移動設備並不是易事。 iScroll infinite版本使用緩存機制,容許你滾動一個潛在的無限數量的元素。

在你的項目中包含僅僅4kb大小的iScroll，你的項目便擁有了滾動，縮放，平移，無限滾動，視差滾動，旋轉功能。web

在使用這個插件時首先要引入iScoll這個js文件。IScroll是一個類，每一個須要使用滾動功能的區域均要進行初始化。bootstrap

<script type="text/javascript" src="js/iscroll.js" ></script>
<script type="text/javascript">
　　var myScroll;

　　 function loaded() {
　　　　　　myScroll = new iScroll('wrapper');
　　　}緩存

</script>

儘量保持DOM結構的簡潔。最佳的HTML結構以下：app

<div id="wrapper">
    <ul>
        <li>...</li>
        <li>...</li>
        ...
    </ul>
</div>

iScroll做用於滾動區域的外層。在上面的例子中，UL元素能進行滾動。只有容器元素的第一個子元素能進行滾動，其餘子元素徹底被忽略。ide

這裏演示一個其中的水平滾動效果：性能

代碼以下：

<!DOCTYPE html>

<html>

    <head>
        <title>test</title>
        <!--<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
        <link rel="stylesheet" type="text/css" href="css/datepicker.css">-->
        <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
        <style type="text/css">
            body,ul,li {
                padding:0;
                margin:0;
            }
            
            body {
                font-size:12px;
                -webkit-user-select:none;
                -webkit-text-size-adjust:none;
            /*    -webkit-box-sizing:border-box;*/
                font-family:helvetica;
            /*    padding-bottom:45px;    /*    This prevents the scroller to lock if the user swipes down outside of the screen.
                                             NOT needed if in home screen mode. */
            }
            
            #header {
                position:absolute; z-index:2;
                top:0; left:0;
                width:100%;
                height:45px;
                line-height:45px;
                background-image:-webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #fe96c9), color-stop(0.05, #d51875), color-stop(1, #7b0a2e));
                background-image:-moz-linear-gradient(top, #fe96c9, #d51875 5%, #7b0a2e);
                background-image:-o-linear-gradient(top, #fe96c9, #d51875 5%, #7b0a2e);
                padding:0;
                color:#eee;
                font-size:20px;
                text-align:center;
            }
            
            #header a {
                color:#f3f3f3;
                text-decoration:none;
                font-weight:bold;
                text-shadow:0 -1px 0 rgba(0,0,0,0.5);
            }
            
            #wrapper {
                position:absolute; z-index:1;
                top:45px; bottom:0; left:0;
                width:100%;
                background:#aaa;
                overflow:auto;
            }
            
            #scroller {
                width:2040px;
                height:100%;
                float:left;
                padding:0;
            }
            
            #scroller ul {
                list-style:none;
                display:block;
                float:left;
                width:100%;
                height:100%;
                padding:0;
                margin:0;
                text-align:left;
            }
            
            #scroller li {
                display:block;
                vertical-align:middle;
                float:left;
                padding:0 10px;
                width:80px;
                height:100%;
                border-left:1px solid #ccc;
                border-right:1px solid #fff;
                background-color:#fafafa;
                font-size:14px;
            }
        </style>
            
    </head>      
     
    <body>
        <div id="wrapper">
            <div id="scroller">
                <ul id="thelist">
                    <li>Pretty col 1</li>
                    <li>Pretty col 2</li>
                    <li>Pretty col 3</li>
                    <li>Pretty col 4</li>
                    <li>Pretty col 5</li>
                    <li>Pretty col 6</li>
                    <li>Pretty col 7</li>
                    <li>Pretty col 8</li>
                    <li>Pretty col 9</li>
                    <li>Pretty col 10</li>
                    <li>Pretty col 11</li>
                    <li>Pretty col 12</li>
                    <li>Pretty col 13</li>
                    <li>Pretty col 14</li>
                    <li>Pretty col 15</li>
                    <li>Pretty col 16</li>
                    <li>Pretty col 17</li>
                    <li>Pretty col 18</li>
                    <li>Pretty col 19</li>
                    <li>Pretty col 20</li>
                </ul>
            </div>
        </div>

    </body>
      <script type="text/javascript" src="js/iscroll.js" ></script>
      <script type="text/javascript">
          
          var myScroll;
        function loaded() {
            myScroll = new iScroll('wrapper',{
                
            });
        }
        
        document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
        
        document.addEventListener('DOMContentLoaded', loaded, false);
                  
      </script>

</html>

效果以下：

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。