js模拟滚动条的效果

最近在电视机端做一个页面显示从数据库读出的内容,遥控器无法直接触发鼠标的事件,并且手边的机顶盒的浏览器内核无法区分scrollHeight 与offsetHeight,不管在什么情况下,两者的值都是一样的改变scrollTop的值无法达到滚动内容的目的,所以只好另外寻找解决办法,在一个同事的提醒下,找到了下面这种解决办法,可以达到使用滚动条的效果, 通过绑定按键来达到效果,绑定的方法就是下面的changePage()的方法。 下面直接贴上页面的代码,部分绑定按键的代码已省略

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html"; charset="gb2312" />
<title>无标题文档</title>
<script src="../site125/global.js"></script>
<script>
var pageHight = 0;
var currPage = 1;
var totalPage = 1;
var scrollBar;

function init(){   
    
	//showTime(); 
	initContentlen();
}
	function $(id)
	{
		return document.getElementById(id);
	}
 
function initContentlen(){
        //得到一页内容的高度
	pageHight = parseInt($("contentDiv").offsetHeight); 
	var contentHeight = parseInt($("content").offsetHeight);  
         //设置div的位置属性为绝对位置,否则达不到效果	
         $("content").style.position="absolute"; 
	$("content").style.top="0px"; 
        //得到全部内容的高度
	totalPage = Math.ceil(contentHeight/pageHight)
			
} 
 
function changePage(__num){  
	changeContentPage(__num); 
}

function changeContentPage(__num){
         //如果只有一页则不会做任何操作
	if(totalPage == 1) return;
	currPage += __num; 
         //如果到达最后一页时再点击下则停留在最后一页
	if(currPage > totalPage) currPage = totalPage;
         //如果到达第一页时在点击上则停留在第一页
	else if(currPage < 1) currPage = 1;
        //关键代码这句代码控制显示的内容
	$("content").style.top = -(currPage-1)*pageHight+"px"; 
	}
 
</script>
</head>

<body οnlοad="init();">  

  <div id="contentDiv" style="position:absolute; left:15px; top:79px; width:1173px; height: 447px; border:1px solid red; overflow:hidden; font-size:22px; color:#232323; line-height:41px;">

  <div id="content" style="height:auto;font-size:22px; color:#232323; line-height:41px;">  
	     发反反复复滚动条模拟实在基本JS拖拽基础上的加深。

滚动条需要做的是1.滚动条的拖拽,以及内容滚动高度的改变。
2.上下按钮点击效果以及内容高度改变。
3.鼠标滚轮在内容中滚动时内容高度改变,以及滚动条的高度改变。

我把这种模拟滚动条分成两类,
一类是内容属性为overflow:hidden的
,重点在于上文所说的第三点,
如果是hidden属性的话,滚轮在页面内容里滚动是不会触发onscroll事件的,
需要给鼠标滚轮绑定事件,而鼠标滚轮事件在IE中是onmousewheel,
在DOM中是DOMMouseScroll,后者还需要addEventListener来添加,非常的麻烦,
这里第二种更加简单易于理解的方法。第二类就是overflow:scroll的,
当然只是在JS中内容超过高度或者宽度了再设置X,或Y方向的scroll。
这种方法在内容框边上会有个自动生成的滚动条,你可以用背景,
或者用你自己做的滚动条样式覆盖上去,这种方法的话上文说的第三点只需要在内容中绑定onscroll事件即可,
不必处理浏览器的兼容性
滚动条模拟实在基本JS拖拽基础上的加深。

滚动条需要做的是1.滚动条的拖拽,以及内容滚动高度的改变。
2.上下按钮点击效果以及内容高度改变。
3.鼠标滚轮在内容中滚动时内容高度改变,以及滚动条的高度改变。

我把这种模拟滚动条分成两类,
一类是内容属性为overflow:hidden的
,重点在于上文所说的第三点,
如果是hidden属性的话,滚轮在页面内容里滚动是不会触发onscroll事件的,
需要给鼠标滚轮绑定事件,而鼠标滚轮事件在IE中是onmousewheel,
在DOM中是DOMMouseScroll,后者还需要addEventListener来添加,非常的麻烦,
这里第二种更加简单易于理解的方法。第二类就是overflow:scroll的,
当然只是在JS中内容超过高度或者宽度了再设置X,或Y方向的scroll。
这种方法在内容框边上会有个自动生成的滚动条,你可以用背景,
或者用你自己做的滚动条样式覆盖上去,这种方法的话上文说的第三点只需要在内容中绑定onscroll事件即可,
不必处理浏览器的兼容性
滚动条模拟实在基本JS拖拽基础上的加深。

滚动条需要做的是1.滚动条的拖拽,以及内容滚动高度的改变。
2.上下按钮点击效果以及内容高度改变。
3.鼠标滚轮在内容中滚动时内容高度改变,以及滚动条的高度改变。

我把这种模拟滚动条分成两类,
一类是内容属性为overflow:hidden的
,重点在于上文所说的第三点,
如果是hidden属性的话,滚轮在页面内容里滚动是不会触发onscroll事件的,
需要给鼠标滚轮绑定事件,而鼠标滚轮事件在IE中是onmousewheel,
在DOM中是DOMMouseScroll,后者还需要addEventListener来添加,非常的麻烦,
这里第二种更加简单易于理解的方法。第二类就是overflow:scroll的,
当然只是在JS中内容超过高度或者宽度了再设置X,或Y方向的scroll。
这种方法在内容框边上会有个自动生成的滚动条,你可以用背景,
或者用你自己做的滚动条样式覆盖上去,这种方法的话上文说的第三点只需要在内容中绑定onscroll事件即可,
不必处理浏览器的兼容性

    </div>
  </div>
<input type="button"  value="up" οnclick="changePage(-1)">
<input type="button"  value="down" οnclick="changePage(1)">

</body>
</html>

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值