css层滚动条

ttx9n · 发表于 2008-4-29 22:31:26

比较有特色的滚动条效果代码

<html> 
<head><title>层滚动条DIY - Powered by yexj00</title> 
<style> 
 
</style>

function getInfor(){ 
mx=event.clientX+document.documentElement.scrollLeft; 
my=event.clientY+document.documentElement.scrollTop;  
scrollbar_L=document.documentElement.clientLeft+$("outerDiv").style.pixelLeft+$("scroll_area").offsetLeft+$("scroll_bar").offsetLeft; 
scrollbar_T=document.documentElement.clientTop+$("outerDiv").style.pixelTop+$("scroll_area").offsetTop+$("scroll_bar").offsetTop; 
scrollbar_W=$("scroll_bar").offsetWidth; 
scrollbar_H=$("scroll_bar").offsetHeight; 
scrollarea_T=document.documentElement.clientTop+$("outerDiv").style.pixelTop+$("scroll_area").offsetTop; 
scrollarea_H=$("scroll_area").offsetHeight; 
}

function dragit(){ 
getInfor();

if(event.srcElement.id=="scroll_bar"){ 
  drag=true; 
  $("scroll_bar").style.background="#cccccc"; 
  startT=$("scroll_bar").style.pixelTop; 
  startY=event.clientY; 
 document.onmousemove=move; 
   } 
 } 
function move(){ 
if(drag==true){ 
$("scroll_bar").style.pixelTop=startT+event.clientY-startY; 
$("scroll_content").scrollTop=$("scroll_bar").style.pixelTop/$("scroll_area").offsetHeight*$("scroll_content").scrollHeight; 
if($("scroll_bar").style.pixelTop<=0){ $("scroll_bar").style.pixelTop=0} 
if($("scroll_bar").style.pixelTop>=(scrollarea_H-scrollbar_H)){

$("scroll_bar").style.pixelTop=scrollarea_H-scrollbar_H; 
 } 
return false; 
   }

}

document.onmousedown=dragit; 
document.onmouseup=new Function("drag=false;$('scroll_bar').style.background='#efefef'"); 
//--> 
</script> 
</head> 
<body onload="setbarHeight()">

<script language="Javascript"> 
 
</script>

</body> 
</html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

0y3yp · 发表于 2022-9-30 03:09:20

很好，谢谢分享

Anthonylam · 发表于 2023-10-12 15:35:15

很不错的玩意

mkonji · 发表于 2023-10-22 16:05:14

人都不在了啊啊

wangdj110 · 发表于 2023-11-3 18:50:23

好东西可以可以可以可以

360784533 · 发表于 2023-12-5 07:00:58

554411515451555

qzdhcgs · 发表于 2024-3-11 02:49:05

vcxvcxv

xf9hlg1 · 发表于 2024-4-19 04:02:10

看看看看

feiyasqhr · 发表于 2024-6-5 11:42:35

收下来看看怎么样

回复用户5 · 发表于 2024-9-1 10:00:15

论坛有你更精彩！

账号		自动登录	找回密码
密码			立即注册

[CSS/HTML] css层滚动条

相关帖子