天天看點
傳回

自己寫的div滾動條

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>Untitled Document</title>

<mce:script src="jquery-1.4.1.js" mce_src="jquery-1.4.1.js"><!--

// --></mce:script>

</head>

<mce:style><!--

body {

margin: 0;

background: #FFF;

}

#Scroll {

width: 649px;

height: 410px;

border: solid #CCCCCC 1px;

background: url(lan2.jpg) repeat-y;

margin-left: 100px;

}

#tiao {

padding-top: 10px;

background: #000;

cursor: hand;

width: 45px;

margin-left: 604px;

}

--></mce:style><style mce_bogus="1"> body {

margin: 0;

background: #FFF;

}

#Scroll {

width: 649px;

height: 410px;

border: solid #CCCCCC 1px;

background: url(lan2.jpg) repeat-y;

margin-left: 100px;

}

#tiao {

padding-top: 10px;

background: #000;

cursor: hand;

width: 45px;

margin-left: 604px;

}

</style>

<mce:script type="text/javascript"><!--

var Sys = {};

var ua = navigator.userAgent.toLowerCase();

var s;

(s = ua.match(/msie ([/d.]+)/)) ? Sys.ie = s[1] : (s = ua.match(/firefox//([/d.]+)/)) ? Sys.firefox = s[1] : (s = ua.match(/chrome//([/d.]+)/)) ? Sys.chrome = s[1] : (s = ua.match(/opera.([/d.]+)/)) ? Sys.opera = s[1] : (s = ua.match(/version//([/d.]+).*safari/)) ? Sys.safari = s[1] : 0;

//以下進行測試

// if (Sys.ie) document.write('IE: ' + Sys.ie);

// if (Sys.firefox) document.write('Firefox: ' + Sys.firefox);

// if (Sys.chrome) document.write('Chrome: ' + Sys.chrome);

// if (Sys.opera) document.write('Opera: ' + Sys.opera);

//if (Sys.safari) document.write('Safari: ' + Sys.safari);

$(document).ready(function(){

var height = document.getElementById('news').scrollHeight;

alert(height)

if (height > 410) {

height = height / 410;

scrollSize = (410 / height);

$("#tiao").css("height", scrollSize + "px");

}

});

var scrollSize;

var bool = false;

var clickY;

var moveY;

var hei;

var y2;

function ScrollOnClick(e){

bool = true;

if (Sys.firefox)

clickY = e.pageY;

else

clickY = e.y;

var x = document.getElementById("tiao").offsetLeft;

var y = document.getElementById("tiao").offsetTop;

y2 = document.getElementById("Scroll").offsetTop;

hei = clickY - y;

}

function ScrollOnMouseMove(e){

if (bool == true) {

if (Sys.firefox)

moveY = e.pageY;

else

moveY = e.y;

if (Sys.ie) {

if (Sys.ie == 8.0)

var size = (moveY - hei) - y2

else

var size = (moveY - hei)

}

else {

var size = (moveY - hei) - y2;

}

if (size < (400 - scrollSize) && size > -1) {

$("#tiao").css("margin-top", size);

var height = document.getElementById('news').scrollHeight;

height = height / 360;

var scrollTop = document.getElementById('news').scrollTop;

document.getElementById('news').scrollTop = size * height;

}

}

}

function ScrollOnMouseUp(e){

bool = false;

}

// --></mce:script>

<body>

<div id="Scroll">

<div id = "news" style=" color:#FBAA8C;position:absolute; overflow:scroll;overflow:hidden;height:410px; width:600px ">

star

<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 align="right">

<div id="tiao" οnmοuseοut="ScrollOnMouseUp();" οnmοusemοve="ScrollOnMouseMove(event);" οnmοusedοwn="ScrollOnClick(event);" οnmοuseup="ScrollOnMouseUp();">

</div>

</div>

</div>

<mce:script type="text/javascript"><!--

// --></mce:script>

</body>

</html>

div function scroll border safari html
上一篇: 為groupbox，panel。。。加滾動條
下一篇: 給 JTextArea 加滾動條

繼續閱讀