用绝对定位实现无滚动条的全屏滚动

基础样式：

 

/* 用通配符清除默认样式减少代码量，实际项目应对用到的标签清除默认样式*/
*{margin:0;padding:0;list-style:none;}
html,body,#content,.section{height:100%;width:100%;}
html,body{position: relative;overflow: hidden;}
#content{position: absolute;top:0;left:0;}
.fixedBar{position:fixed;top:50%;left:20px;width:30px;}
.fixedBar span{height:30px;border:1px solid #fff;margin-top:-1px;cursor:pointer;display:block;}

html 骨架：

 

 

<div id="content">
    <div class="section section1"></div>
    <div class="section section2"></div>
    <div class="section section3"></div>
    <div class="section section4"></div>
</div>
<div class="fixedBar">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
</div>

javascript 结构：

 

 

window.onload = pageMove;
function pageMove () {
    var winH = document.documentElement.offsetHeight;
    var con = document.getElementById('content');
    var colorArr = ['red','green','blue','yellow'];
    var sections = getElementsByClassName('section');
    var fixedBar = getElementsByClassName('fixedBar')[0];
    var spans = fixedBar.getElementsByTagName('span');
    fixedBar.style.cssText = 'margin-top:-' + 1/2 * fixedBar.offsetHeight + 'px';
    for(var i = 0; i < spans.length; i ++) {
        sections[i].style.background = colorArr[i];
        spans[i].style.background = colorArr[i];
        spans[i].index = i;
        spans[i].onclick = function () {
            animate(con,-winH*this.index);
        }
    }
}
/*备用函数*/
function getElementsByClassName(classname) {
    if(document.getElementsByClassName) {
        return document.getElementsByClassName(classname);
    }
    var eleArr = document.getElementsByTagName('*');
    var classArr = [];
    for(var i = 0; i < eleArr.length; i ++) {
        var classnameArr = eleArr[i].className.split(' ');
        for(var j = 0; j < classnameArr.length; j ++) {
            if(classnameArr[j] == classname) {
                classArr.push(eleArr[i]);
            }
        }
    }
    return classArr;
}
function scroll() {
    if(!window.pageXOffset) {
        return {
            left:window.pageXOffset,
            top:window.pageYOffset
        }
    } else if(document.documentMode === 'CSS1Compat') {
        return {
            left:document.documentElement.scrollLeft,
            top:document.documentElement.scrollTop
        }
    }
    return {
        left:document.scrollLeft,
        top:document.scrollTop
    }
}
function animate(obj,distance) {
    clearInterval(obj.timer);
    obj.timer = setInterval(function () {
        var step = (distance - obj.offsetTop) / 10;
        step = (step > 0)? Math.ceil(step) : Math.floor(step);
        obj.style.top = obj.offsetTop + step + 'px';
        if(obj.offsetTop == distance) {
            clearInterval(obj.timer);
        }
    },20);
}