IScroll5

  • 普通滚动
<!DOCTYPE html>
<html>
    
    <!--结构-->
    <div id="example">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
        </ul>
    </div>  
    
    
    <!--样式-->
    <style>
    
        html,body
        {
            margin : 0;
            padding: 0; 
        }
        
        #example
        {
            width : 500px;
            height: 500px;
            background-color: #E9E9E9;
            
            overflow-y: hidden;
        }
        
        ul
        {
            padding: 0;
            margin : 0;
            
            width: 100%;
            background-color: #666;
        }
        
        li
        {
            width : 100%;
            height: 100px;
            background-color: black;
            
            border-bottom: 1px solid #FFF;
            
            text-align: center;
            line-height: 100px;
            font-size: 30px;
            color: #FFF;
            
            list-style: none;
            opacity: 0.6;
        }
        
    </style>
    
    
    <!--代码-->
    <script>
        
        window.onload = function()
        {
            var iscroll = new IScroll('#example')
        }
    
    </script>
    
    <script src="src/iscroll.js"></script>
    
</html>
  • 横向分页滚动
<!DOCTYPE html>
<html>
    
    <!--结构-->
    <div id="example">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
    </div>  
    
    
    <!--样式-->
    <style>
    
        html,body
        {
            margin : 0;
            padding: 0; 
        }
        
        #example
        {
            width : 500px;
            height: 500px;
            background-color: #E9E9E9;
            
            overflow: hidden;
        }
        
        ul
        {
            padding: 0;
            margin : 0;
            
            width: 1500px;
            height: 500px;
            background-color: #666;
        }
        
        li
        {
            width : 500px;
            height: 500px;
            float: left;
            background-color: black;
            
            text-align: center;
            line-height: 500px;
            font-size: 100px;
            color: #FFF;
            list-style: none;
        }
        
    </style>
    
    
    <!--代码-->
    <script>
        
        window.onload = function()
        {
            var iscroll = new IScroll('#example',{snap:true,scrollX:true,scrollY:true})
        }
    
    </script>
    
    <script src="src/iscroll.js"></script>
    
</html>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容