滚动（原生）

<!-- 结构 -->
<div id="scroll">
    <ul id="content">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
</div>


<!-- 样式  -->
<style>
    
    html,body
    {
        width: 100%;
        height: 100%;
    }
    
    *
    {
        margin : 0;
        padding: 0;
        list-style: none;
    }
    
    #scroll
    {
        width: 500px;
        height: 500px;
        background-color: #E9E9E9;
        
        overflow-y:auto;
    }
    
    #content
    {
        width: 400px;
        height: 1000px;
    }
    
    li
    {
        width: 100%;
        height: 200px;
        background-color: #999;
        
        line-height: 200px;
        text-align: center;
        font-size: 50px;
    }
    
</style>


<!-- 行为 -->
<script>
    
    
    function scroll(id)
    {
        
        /**
         * 当前滚动的百分比
         */
        var value = 0;
        
        
        /**
         * 滚动容器
         */
        var node = document.getElementById(id);
            node.addEventListener('scroll',onEvent);
            
        
        /**
         * 侦听滚动
         */
        function onEvent(e)
        {
            value = node.scrollTop/parseInt(getComputedStyle(node).getPropertyValue("height"));
        }
        
        /**
         * 设置滚动位置
         */
        function moveTo(n)
        {
            node.scrollTop = parseInt(getComputedStyle(node).getPropertyValue("height"))*n
        }
        
        
        return{
            
            value :value,
            moveTo:moveTo
        }
    }
    
    
    var s = scroll('scroll');
    s.moveTo(0.5);
    
</script>