手写js滚动条
<!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=utf-8" />
<title>无标题文档</title>
<link href="css/base.css" type="text/css" rel="stylesheet" />
<style type="text/css">
.detail-scroll-box{ width:950px; margin:0 auto; margin-top:200px; height:425px; font-size:12px; line-height:30px; }
.scroll-panel{ height:425px; overflow:hidden; width:950px; float:left; position:relative;}
.scroll-content{ width:950px; position:absolute; left:0px; top:0;}
.scroll-bar{ width:4px; height:425px; float:right; margin-right:10px; background:#bebebe; position:relative; display:none;}
.scroll-block{ position:absolute; width:13px; height:48px; right:-4px; top:0px; background: url(img/scrollblock.png) center top no-repeat; cursor:pointer;}
</style>
<script type="text/javascript" language="javascript" src="js/jquery-1.9.1.min.js"></script>
</head>
<body>
<div class="detail-scroll-box clearfix" id="DetailScrollBox">
<div class="scroll-panel">
<div class="scroll-content" id="ScrollContent">
换行<br />换行<br />换行<br />换行<br />换行<br />换行<br />换行<br />换行<br />换行<br />换行<br />换行<br />换行<br />换行<br />换行<br />
换行<br />换行<br />换行<br />换行<br />换行<br />换行<br />换行<br />换行<br />换行<br />换行<br />换行<br />换行<br />换行<br />换行<br />
换行<br />换行<br />换行<br />换行<br />换行<br />换行<br />换行<br />换行<br />换行<br />换行<br />换行<br />换行<br />换行<br />换行<br />
换行<br />换行<br />换行<br />换行<br />换行<br />换行<br />换行<br />换行<br />换行<br />换行<br />换行<br />换行<br />换行<br />换行<br />换行<br />
换行<br />换行<br />换行<br />换行<br />换行<br />换行<br />换行<br />换行<br />换行<br />换行<br />换行<br />换行<br />换行<br />换行<br />
换行<br />换行<br />换行<br />换行<br />换行<br />换行<br />换行<br />换行<br />换行<br />换行<br />换行<br />换行<br />换行<br />换行<br />
----end-----
</div>
</div>
<div class="scroll-bar" id="scrollbar">
<div class="scroll-block" id="scrollblock" ></div>
</div>
</div>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<script>
var h=$("#ScrollContent").height(),
dragging = false,
yy=0,
msy;
if(h>425)
{
$("#scrollbar").show();
$(".scroll-panel").width(915);
$(".scroll-content").width(915);
h=$("#ScrollContent").height();
}
else
{
$("#scrollbar").hide();
$(".scroll-panel").width(950);
$(".scroll-content").width(950);
}
$("#scrollblock").mousedown(function(e){
dragging=true;
e = e||window.event;
msy=e.clientY-$("#scrollblock").position().top;
return false;
});
document.onmousemove = function(e){
e = e||window.event;
if(dragging==true)
{
yy=e.clientY-msy;
scrollContenttop();
return false;
}
}
$(document).mouseup(function(e) {
dragging = false;
$("#scrollblock")[0].releaseCapture();
e.cancelBubble = true;
})
function scrollContenttop()
{
if(yy<0)
{
yy=0;
}
if(yy>376)
{
yy=376;
}
var b=(h-425)/376;
$("#ScrollContent").css({"top":-yy*b});
$("#scrollblock").css({"top":yy+"px"});
}
//阻止冒泡函数
var scrollFunc=function(e){
e=e||window.event;
if (e&&e.preventDefault){
e.preventDefault();
e.stopPropagation();
}else{
e.returnvalue=false;
return false;
}
}
if (window.addEventListener)
{
window.addEventListener('DOMMouseScroll', wheel, false);
window.onmousewheel = document.onmousewheel = wheel;
}
//鼠标中键滚动
function handle(delta) {
if(delta>0)
{
yy-=10;
}
else
{
yy+=10;
}
scrollContenttop();
}
function wheel(event){
var DetailScrollBox=$("#DetailScrollBox").offset();
if(event.clientX<DetailScrollBox.left||event.clientX>DetailScrollBox.left+950||event.clientY<DetailScrollBox.top||event.clientY>DetailScrollBox.top+425)
{
}
else
{
scrollFunc(event);
var delta = 0;
if (!event) event = window.event;
if (event.wheelDelta) {
delta = event.wheelDelta/120;
if (window.opera) delta = -delta;
}
else if (event.detail)
{
delta = -event.detail/3;
}
if (delta)
handle(delta);
}
}
</script>
</body>
</html>
浙公网安备 33010602011771号