HTML代码中给div标签增加滚动条的方法
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style>
.divMain
{/*给div添加滚动效果*/
PADDING-RIGHT:10px;
OVERFLOW-Y:auto;
PADDING-LEFT:10px;
SCROLLBAR-FACE-COLOR:#ffffff;
FONT-SIZE:11pt;
PADDING-BOTTOM:0px;
SCROLLBAR-HIGHLIGHT-COLOR:#ffffff;
OVERFLOW:auto;WIDTH:510px;
SCROLLBAR-SHADOW-COLOR:#919192;
COLOR:blue;
SCROLLBAR-3DLIGHT-COLOR:#ffffff;
LINE-HEIGHT:100%;
SCROLLBAR-ARROW-COLOR:#919192;
PADDING-TOP:0px;
SCROLLBAR-TRACK-COLOR:#ffffff;
FONT-FAMILY:宋体;
SCROLLBAR-DARKSHADOW-COLOR:#ffffff;
LETTER-SPACING:1pt;
HEIGHT:400px;
TEXT-ALIGN:left;
overflow-y:hidden;/*隐藏滚动条*/
}
.one
{
width:500px;
height:200px;
position:absolute;
left:0px;
top:0px;
border:1px solid #FF9966;
background:#ccc;
filter:alpha(opacity=1);
}
.two
{
width:500px;
height:200px;
position:absolute;
left:0px;
top:0px;
border:1px solid #FF9966;
background:#0099FF;
filter:alpha(opacity=1);
}
</style>
<script src="js/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(function () {
var odiv = document.getElementById("divmain");//
var divmainLeft = odiv.getBoundingClientRect().left;//获取divmain的位置
var divmainTop = odiv.getBoundingClientRect().top
$("#one1").css("top",divmainTop );
$("#one1").css("left",divmainLeft);
$("#two1").css("top", divmainTop+200);
$("#two1").css("left", divmainLeft);
var boo_ = false;
var boo__ = false;
$("#one1").mouseenter(function () {
boo_ = false;
var v = window.event.clientY;
var handler = function () {
var vv = $("#divmain").scrollTop();
$("#lab").val(vv);
$("#divmain").scrollTop(vv + 5);
if (vv >= 628 || boo_ == true) {
clearInterval(timer);
}
}
var timer = setInterval(handler, 50);
});
$("#one1").mouseleave(function () {
//鼠标离开事件
boo_ = true;
});
$("#two1").mouseenter(function () {
boo__ = false;
var v = window.event.clientY;
var handler = function () {
var vv = $("#divmain").scrollTop();
$("#lab").val(vv);
$("#divmain").scrollTop(vv - 5);
if (vv == 0 || boo__ == true) {
clearInterval(timer);
}
}
var timer = setInterval(handler, 50);
});
$("#two1").mouseleave(function () {
//鼠标离开事件
boo__ = true;
});
});
</script>
</head>
<body>
<div id="divmain" class="divMain">
<img src="1.jpg"/>
</div>
<div id="one1" class="one"></div>
<div id="two1" class="two"></div>
<input type="text" id="lab" />
</body>
</html>
