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

/* 用通配符清除默认样式减少代码量，实际项目应对用到的标签清除默认样式*/
*{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;}

<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>

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 != null) {
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);
}