模拟滚动条实现-优快云博客

本文链接：https://blog.youkuaiyun.com/iteye_8605/article/details/82580850

最近在电视机端做一个页面显示从数据库读出的内容，遥控器无法直接触发鼠标的事件，并且手边的机顶盒的浏览器内核无法区分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>

js模拟滚动条的效果