<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>javascript模拟滚动条 兼容ie7</title>
<link rel="stylesheet" type="text/css" href="css/reset.css">
<style type="text/css">
body{
font: 16px/40px '微软雅黑';
}
h2{
text-align: center;
font-weight: 600;
font-size: 1.4em;
}
h3{
text-indent: 24px;
font-size: 1.4em;
}
#scroll{
width: 400px;
margin: 100px auto;
padding: 10px 30px 10px 10px;
border: 1px solid #ccc;
border-radius: 4px;
height: 500px;
overflow: hidden;
position: relative;
}
#scroll-bar{
position: absolute;
width: 10px;
left: 0px;
top: 0px;
border-left: 1px solid #ccc;
border-radius: 4px;
}
#bar{
width: 10px;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
border-radius: 4px;
background-color: #ccc;
}
</style>
</head>
<body>
<div id="scroll">
<div id="content">
<h2>春江花月夜</h2>
<p>春江潮水连海平，海上明月共潮生。</p>
<p>滟滟随波千万里，何处春江无月明。</p>
<p>江流宛转绕芳甸，月照花林皆似霰。</p>
<p>空里流霜不觉飞，汀上白沙看不见。</p>
<p>江天一色无纤尘，皎皎空中孤月轮。</p>
<p>江畔何人初见月？江月何年初照人？</p>
<p>人生代代无穷已，江月年年望相似。</p>
<p>不知江月待何人，但见长江送流水。</p>
<p>白云一片去悠悠，青枫浦上不胜愁。</p>
<p>谁家今夜扁舟子？何处相思明月楼？</p>
<p>可怜楼上月徘徊，应照离人妆镜台。</p>
<p>玉户帘中卷不去，捣衣砧上拂还来。</p>
<p>此时相望不相闻，愿逐月华流照君。</p>
<p>鸿雁长飞光不度，鱼龙潜跃水成文。</p>
<p>昨夜闲潭梦落花，可怜春半不还家。</p>
<p>江水流春去欲尽，江潭落月复西斜。</p>
<p>斜月沉沉藏海雾，碣石潇湘无限路。</p>
<p>不知乘月几人归，落月摇情满江树。</p>
<h3>译文：</h3>
<div class="ele_text_res">
<p>春天的江潮水势浩荡，与大海连成一片，一轮明月从海上升起，好像与潮水一起涌出来。</p>
<p>月光照耀着春江，随着波浪闪耀千万里，所有地方的春江都有明亮的月光。</p>
<p>江水曲曲折折地绕着花草丛生的原野流淌，月光照射着开遍鲜花的树林好像细密的雪珠在闪烁。</p>
<p>月色如霜，所以霜飞无从觉察。洲上的白沙和月色融合在一起，看不分明。</p>
<p>江水、天空成一色，没有一点微小灰尘，明亮的天空中只有一轮孤月高悬空中。</p>
<p>江边上什么人最初看见月亮，江上的月亮哪一年最初照耀着人？</p>
<p>人生一代代地无穷无尽，只有江上的月亮一年年地总是相像。</p>
<p>不知江上的月亮等待着什么人，只见长江不断地一直运输着流水。</p>
<p>游子像一片白云缓缓地离去，只剩下思妇站在离别的青枫浦不胜忧愁。</p>
<p>哪家的游子今晚坐着小船在漂流？什么地方有人在明月照耀的楼上相思？</p>
<p>可怜楼上不停移动的月光，应该照耀着离人的梳妆台。</p>
<p>月光照进思妇的门帘，卷不走，照在她的捣衣砧上，拂不掉。</p>
<p>这时互相望着月亮可是互相听不到声音，我希望随着月光流去照耀着您。</p>
<p>鸿雁不停地飞翔，而不能飞出无边的月光；月照江面，鱼龙在水中跳跃，激起阵阵波纹。</p>
<p>（此二句写月光之清澈无边，也暗含鱼雁不能传信之意。）</p>
<p>昨天晚上随意谈着梦中落下的花，可惜的是春天过了一半还不能回家。</p>
<p>江水带着春光将要流尽，水潭上的月亮又要西落。</p>
<p>斜月慢慢下沉，藏在海雾里，碣石与潇湘的离人距离无限遥远。</p>
<p>不知有几人能趁着月光回家，唯有那西落的月亮摇荡着离情，洒满了江边的树林。</p>
</div>
</div>
<div id="scroll-bar">
<div id="bar"></div>
</div>
</div>
<script type="text/javascript">
// 原理就是 框体有大小，内容无大小，框体超出部分隐藏 内容自动撑开, 根据比例获得滑块和滑框来进行滑动,滑块到顶部的距离，再换算成 内容-margin-top
window.onload = function (){
var scroll = document.getElementById("scroll");
var content = document.getElementById("content");
var scrollBar = document.getElementById("scroll-bar");
var bar = document.getElementById("bar");
var scrollH = scroll.offsetHeight;
var contentH = content.offsetHeight;
// 滚动条框 和框体的高度是一样的
scrollBar.style.height = scrollH + "px";
// 开始我想用right的,但是ie7 不兼容
scrollBar.style.left = scroll.offsetWidth - 12 + "px";
// 滚动条的高度等于 框体高*(框体的高度比上内容的高度) (小学数学);
bar.style.height = scrollH*(scrollH/contentH)+'px';
var isMove = false;//是否开启滑动
var oldY = 0;//滑动之前的老位置 初始化为0
bar.onmousedown = function (event){
var event = event || window.event;
oldY = event.clientY;
isMove = true;
return false;
}
document.onmouseup = function (){
isMove = false;
return false;
}
document.onmousemove = function (event){
var event = event || window.event;
if (isMove) {
// 滚动条变化的值 dirY
var dirY = event.clientY - oldY;
goOn(dirY);
oldY = event.clientY;
}
}
// 滚动事件
scroll.onmousewheel = function (event){
var event = event || window.event;
// event.wheelDelta 每次滚动都是+-120 这里设置一个系数 120 太大了更适合浏览器的滚动
goOn(-event.wheelDelta*0.2);
return false;
}
function goOn(dirY){
// 滚动条滚动
bar.style.marginTop = bar.offsetTop + dirY + 'px';
// 越界处理
if (bar.offsetTop < 0) {
bar.style.marginTop = "0px";
}
if ((bar.offsetTop+bar.offsetHeight)>scrollBar.offsetHeight) {
bar.style.marginTop = scrollBar.offsetHeight-bar.offsetHeight+'px';
}
// 内容框的margin-top
content.style.marginTop = - bar.offsetTop/((scrollH-10)/contentH)+"px";
}
}
</script>
</body>
</html>
网友评论