最近在项目中遇到了一个手机界面的效果，比较简单 主要是模拟手机屏幕内容滚动。但是由于每一屏的内容又是滚动的，所以如何避免滚动条随着屏幕滚动成为必需。
做法是 使用一个假的滚动条在容器滚动的时候遮住真正的滚动条，在滚动结束又使得该假滚动条隐藏，这就造成了滚动条静止的假象。另外自动检测内容数目和更新页数也都是常用的方法，无需多说，直接看效果：
下面是代码：
代码和注释
$(function(){
var p=1; //起始页码
var curpage=$("#curpage"); //当前页码容器
var pagelen=$(".phonescr").length; //获得有多少页内容
var total=$("#total"); //总页数容器
var hi=222; //手机屏幕高度
var speed=800; //滚动时间
total.html(pagelen); //初始化总页数
var roller=$("#roller"); //滚动容器
var rollbar=$("#rollbar"); //假滚动条
roller.css({"height":hi*pagelen+"px"}); //初始化滚动容器高度
function countpage(){ //计数器更新当前页数
curpage.html(p);
}
countpage(); //初始化页数
function showscr(){ //切换显示内容
$(".phonescr").eq(p-1).show().siblings(".phonescr").hide();
countpage();
}
function rollscr(){ //滚动显示内容
rollbar.show(); //显示一下假的滚动条 造成滚动条静止的假象
roller.stop()
.animate(
{"top" : -(hi*(p-1))+"px"},
{duration: speed,
easing: "easeInOutBack",
complete: function(){
rollbar.hide(); //滚动完成后隐藏假滚动条
countpage(); //再次更新当前页数
}
});
}
function page( x ){ //控制显示的函数
if((x==-1&&p>1)||(x==1&&p<pagelen) ){
p+=x;
if($.browser.mozilla){ //Firefox 下有问题 不知为何~ 只好屏蔽掉滚动效果
showscr()
}else{
rollscr();
}
}
}
$("#next").click(function(){page( 1 ) }) //上一页
$("#prev").click(function(){page( -1 ) }) //下一页
