用图片替换html中的滚动条

现在有个需求是用自己的图片替换默认的IE的滚动条，我对js基本是不懂。
因为现在已经有个模块用的是htm做的。我在网上也找到了相关的代码，这个代码可以实现我需要的大部分功能，但是有一点没做到就是：当htm内的文本是动态变化的时候，在文本很短没有超过htm页面大小时，滚动条不显示，当超过了页面大小时，才显示滚动条。这点我不知道怎么做，麻烦各位达人帮忙，这段代码的可读性我觉得也不是很好，大家将就看下吧，麻烦大家了。全部复制保存成htm就好。<!DOCTYPE html PUBLIC "-//W3C//DTD X<a href='http://www.pcyyjs.com/webdesign/html/' target='_blank'><u>HTML</u></a> 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>
<style type="text/css">
* { margin:0; padding:0; }
body { margin:20px 0 400px 20px; font:12px Arial; }
h1 { font-size:14px; }
ol { margin:20px; line-height:160%; }
#out {
position:relative;
width:500px;
height:300px;
margin:100px 0 100px 80px;
border:1px solid #369;
overflow:hidden;
}
#content {
width:520px; /*比父容器大20px,将真实滚动条偏出可视区域*/
height:100%;
background:#eee url(http://www.zbw123.com/webmaster/ximenScrollBar/images/bg_michael_jackson.jpg) no-repeat 50%;
overflow:auto;
-moz-user-select:none;
}
#scrollBar,#scrollBarHandle,.scroll_bar_top,.scroll_bar_top_a,.scroll_bar_bottom,.scroll_bar_bottom_a {
background-image:url(http://www.zbw123.com/webmaster/ximenScrollBar/images/un_bg_scrollBar.gif);
}
#scrollBar {
position:absolute;
top:0;
right:0;
z-index:9;
width:14px;
height:100%;
background-repeat:repeat-y;
background-position:-42px 0;
float:left;
}
#scrollBarTop,#scrollBarHandle,#scrollBarBottom {
position:absolute;
left:0;
cursor:default;
}
#scrollBarTop,#scrollBarBottom {
width:100%;
height:14px;
color:#fff;
text-align:center;
}
#scrollBarTop { top:0; }
#scrollBarBottom { bottom:0; }
#scrollBarHandle { width:100%; background-repeat:repeat-y; background-position:-28px 0; }
.scroll_bar_top { background-position:0 0; }
.scroll_bar_top_a { background-position:-14px 0; }
.scroll_bar_bottom { background-position:-56px 0; }
.scroll_bar_bottom_a { background-position:-70px 0; }
</style>
</head>
<body>
<div id="out">
<div id="content">
fsdfs<br />fsdfs<br />11111111<br />fsdfs<br />11111111<br />fsdfs<br />11111111<br />fsdfs<br />11111111<br />fsdfs<br />11111111<br />fsdfs<br />11111111<br />fsdfs<br />11111111<br />fsdfs<br />11111111<br />fsdfs<br />11111111<br />fsdfs<br />11111111<br />fsdfs<br />11111111<br />fsdfs<br />11111111<br />fsdfs<br />11111111<br />fsdfs<br />fsdfs<br />11111111<br />fsdfs<br />11111111<br />fsdfs<br />11111111<br />fsdfs<br />11111111<br />fsdfs<br />11111111<br />fsdfs<br />11111111<br />fsdfs<br />11111111<br />fsdfs<br />11111111<br />fsdfs<br />11111111<br />fsdfs<br />11111111<br />fsdfs<br />11111111<br />fsdfs<br />11111111<br />fsdfs<br />11111111<br />fsdfs<br />fsdfs<br />11111111<br />fsdfs<br />11111111<br />fsdfs<br />11111111<br />fsdfs<br />11111111<br />fsdfs<br />11111111<br />fsdfs<br />11111111<br />fsdfs<br />11111111<br />fsdfs<br />11111111<br />fsdfs<br />11111111<br />fsdfs<br />11111111<br />fsdfs<br />11111111<br />fsdfs<br />11111111<br />fsdfs<br />
</div>
<div id="scrollBar">
<div id="scrollBarTop" class="scroll_bar_top"></div>
<div id="scrollBarHandle"></div>
<div id="scrollBarBottom" class="scroll_bar_bottom"></div>
</div>
</div>
<h1>图片自定义滚动条（Michael Jackson怀念版1.0，天堂从此有了太空舞步！）</h1>
<ol>
<li>支持任意形式（包括图片自定义）的美化扩展，跨<a href='http://www.pcyyjs.com/soft/wyll/' target='_blank'><u>浏览器</u></a>支持</li>
<li>支持鼠标按住上、下箭按钮实现上下滚动</li>
<li>支持鼠标滚轮放于“滚动条区”滚动，而不仅限放于滚动内容区才滚</li>
<li>支持鼠标按住滚动条（未松开）并移出滚动区域仍然能拖拽滚动</li>
<li>滚动条子根据左边滚动内容高与可视区域高度比例等比例，且当滚动条细到一定程度时设置最小高度值</li>
<li>支持鼠标在滚动条子的上下空白区间点击实现上、下定位滚动（模拟windows滚动条）</li>
<li>当页面body有滚动条时，鼠标放于自定义滚动区滚动滚轮，不会造成页面的滚动</li>
</ol>
<p>由于时间仓促代码并没有OO封装和优化，期待大家帮忙寻找bug并提出宝贵建议，将在下一版本完善，谢谢（<a href='http://www.pcyyjs.com/soft/chat/' target='_blank'><u>QQ</u></a>：149561420，gTalk：[email protected]）。</p>
<script>
var ximen = {
$:function(o){ return document.getElementById(o); },
getStyle:function(o) { return o.currentStyle||document.defaultView.getComputedStyle(o,null); },
getOffset:function(o) {
var t = o.offsetTop,h = o.offsetHeight;
while(o = o.offsetParent) { t += o.offsetTop; }
return { top:t, height:h };
},
bind:function(o,eType,fn) {
if(o.addEventListener) { o.addEventListener(eType,fn,false); }
else if(o.attachEvent) { o.attachEvent("on" + eType,fn); }
else { o["on" + eType] = fn; }
},
unbind:function(o,eType,fn) {
if(o.removeEventListener) { o.removeEventListener(eType,fn,false); }
else if(o.detachEvent) { o.detachEvent("on" + eType,fn); }
else { o["on" + eType] = fn; }
},
stopPropagate:function(e) {
if(e && e.stopPropagation) { e.stopPropagation(); } 
else { window.event.cancelBubble = true; }
return false;
},
stopDefault:function(e) {
e = e || window.event;
e.stopPropagation && (e.preventDefault(),e.stopPropagation()) || (e.cancelBubble = true,e.returnValue = false);
}
};
(function(){
var myScrollDown,myScrollUp,scrollBarMouseDown,scrollBarMouseUp,relY,
out = ximen.$("out"),
content = ximen.$("content"),
scrollBar = ximen.$("scrollBar"),
scrollBarTop = ximen.$("scrollBarTop"),
scrollBarHandle = ximen.$("scrollBarHandle"),
scrollBarBottom = ximen.$("scrollBarBottom"),
scrollBarUpHeight = parseInt(ximen.getStyle(scrollBarTop).height),
scrollBarBottomHeight = parseInt(ximen.getStyle(scrollBarBottom).height),
contentScrollHeight = content.scrollHeight, //将content.scrollHeight赋一次值,解决IE6下scrollHeight需调用两次的bug
scrollBarHandleHeight = parseInt(content.offsetHeight/content.scrollHeight * (scrollBar.offsetHeight - scrollBarUpHeight - scrollBarBottomHeight)),
setScrollBarHandle = function() { //当内容超多时设置拖拽条子的最小高度
scrollBarHandle.style.top = scrollBarUpHeight + "px";
if(scrollBarHandleHeight > 15) { scrollBarHandle.style.height = scrollBarHandleHeight + "px"; }
else { scrollBarHandleHeight = 15; scrollBarHandle.style.height = "15px"; }
},
clearAllInterval = function() { clearInterval(myScrollDown); clearInterval(myScrollUp); clearInterval(scrollBarMouseDown); },
forMousemove = function(e) {
var e = e || window.event;
content.scrollTop = (e.clientY - relY - scrollBarUpHeight)/(scrollBar.offsetHeight - scrollBarHandleHeight - scrollBarUpHeight - scrollBarBottomHeight)*(content.scrollHeight - content.offsetHeight);
},
forMouseDown = function(event){
var et = event.target || event.srcElement;
relY = event.clientY - et.offsetTop;
ximen.bind(document,"mousemove",forMousemove);
},
scrollDir = function(e) {
var e = e || window.event,eDir; //设置滚轮事件,e.wheelDelta与e.detail分别兼容IE、W3C，根据返回值的正负来判断滚动方向
if(e.wheelDelta) { eDir = e.wheelDelta/120; }
else if(e.detail) { eDir = -e.detail/3; }
if(eDir > 0) { content.scrollTop -= 80; } //步长设80像素a比较接近window滚动条的滚动速度
else { content.scrollTop += 80; }
ximen.stopDefault(e);
},
scrollBarClick = function(e) {
var e = e || window.event,
mStep = scrollBar.offsetHeight,
documentScrollTop = document.documentElement.scrollTop,
hOffset = ximen.getOffset(scrollBarHandle);
if(documentScrollTop + e.clientY < hOffset.top) { scrollBarMouseDown = setInterval(function(){ content.scrollTop -= 15; },10); }
else if(documentScrollTop + e.clientY > hOffset.top + hOffset.height) { scrollBarMouseDown = setInterval(function(){ content.scrollTop += 15; },10); }
};
setScrollBarHandle();
ximen.bind(content,"scroll",function(){
scrollBarHandle.style.top = content.scrollTop/(content.scrollHeight - content.offsetHeight) * (scrollBar.offsetHeight - scrollBarHandleHeight - scrollBarUpHeight - scrollBarBottomHeight) + scrollBarUpHeight + "px";
});
ximen.bind(scrollBarBottom,"mousedown",function(){ myScrollDown = setInterval(function(){ content.scrollTop += 15; },10); });
ximen.bind(scrollBarTop,"mousedown",function(){ myScrollUp = setInterval(function(){ content.scrollTop -= 15; },10); });
ximen.bind(scrollBarBottom,"mouseup",clearAllInterval);
ximen.bind(scrollBarBottom,"mouseout",clearAllInterval);
ximen.bind(scrollBarTop,"mouseup",clearAllInterval);
ximen.bind(scrollBarTop,"mouseout",clearAllInterval);
ximen.bind(scrollBarHandle,"mousedown",forMouseDown);
ximen.bind(document,"mouseup",function(){
ximen.unbind(document,"mousemove",forMousemove);
ximen.unbind(scrollBarHandle,"mousemove",forMousemove);
});
ximen.bind(out,"selectstart",function(){ return false; });
ximen.bind(out,"select",function(){ document.selection.empty(); });
ximen.bind(out,"mousewheel",scrollDir);
ximen.bind(out,"DOMMouseScroll",scrollDir);
ximen.bind(scrollBar,"mousedown",scrollBarClick);
ximen.bind(scrollBar,"mouseup",clearAllInterval);
ximen.bind(scrollBarTop,"click",function(event){ ximen.stopPropagate(event); });
ximen.bind(scrollBarTop,"mousedown",function(){ scrollBarTop.className = "scroll_bar_top_a"; });
ximen.bind(scrollBarTop,"mouseup",function(){ scrollBarTop.className = "scroll_bar_top"; });
ximen.bind(scrollBarTop,"mouseout",function(){ scrollBarTop.className = "scroll_bar_top"; });
ximen.bind(scrollBarBottom,"click",function(event){ ximen.stopPropagate(event); });
ximen.bind(scrollBarBottom,"mousedown",function(){ scrollBarBottom.className = "scroll_bar_bottom_a"; });
ximen.bind(scrollBarBottom,"mouseup",function(){ scrollBarBottom.className = "scroll_bar_bottom"; });
ximen.bind(scrollBarBottom,"mouseout",function(){ scrollBarBottom.className = "scroll_bar_bottom"; });
})();
</script>
</body>
</html>

解决方案 »

  1.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD X <a href='http://www.pcyyjs.com/webdesign/html/' target='_blank'> <u>HTML </u> </a> 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>
    <style type="text/css">
    * { margin:0; padding:0; }
    body { margin:20px 0 400px 20px; font:12px Arial; }
    h1 { font-size:14px; }
    ol { margin:20px; line-height:160%; }
    #out {
    position:relative;
    width:500px;
    height:300px;
    margin:100px 0 100px 80px;
    border:1px solid #369;
    overflow:hidden;
    }
    #content {
    width:520px; /*比父容器大20px,将真实滚动条偏出可视区域*/
    height:100%;
    background:#eee url(http://www.zbw123.com/webmaster/ximenScrollBar/images/bg_michael_jackson.jpg) no-repeat 50%;
    overflow:auto;
    -moz-user-select:none;
    }
    #scrollBar,#scrollBarHandle,.scroll_bar_top,.scroll_bar_top_a,.scroll_bar_bottom,.scroll_bar_bottom_a {
    background-image:url(http://www.zbw123.com/webmaster/ximenScrollBar/images/un_bg_scrollBar.gif);
    }
    #scrollBar {
    position:absolute;
    top:0;
    right:0;
    z-index:9;
    width:14px;
    height:100%;
    background-repeat:repeat-y;
    background-position:-42px 0;
    float:left;
    }
    #scrollBarTop,#scrollBarHandle,#scrollBarBottom {
    position:absolute;
    left:0;
    cursor:default;
    }
    #scrollBarTop,#scrollBarBottom {
    width:100%;
    height:14px;
    color:#fff;
    text-align:center;
    }
    #scrollBarTop { top:0; }
    #scrollBarBottom { bottom:0; }
    #scrollBarHandle { width:100%; background-repeat:repeat-y; background-position:-28px 0; }
    .scroll_bar_top { background-position:0 0; }
    .scroll_bar_top_a { background-position:-14px 0; }
    .scroll_bar_bottom { background-position:-56px 0; }
    .scroll_bar_bottom_a { background-position:-70px 0; }
    </style>
    </head>
    <body>
    <div id="out">
    <div id="content">
    fsdfs <br />fsdfs <br />11111111 <br />fsdfs <br />11111111 <br />
    fsdfs <br />fsdfs <br />11111111 <br />fsdfs <br />11111111 <br />
    <!--
    fsdfs <br />fsdfs <br />11111111 <br />fsdfs <br />11111111 <br />
    fsdfs <br />fsdfs <br />11111111 <br />fsdfs <br />11111111 <br />
    fsdfs <br />fsdfs <br />11111111 <br />fsdfs <br />11111111 <br />
    fsdfs <br />fsdfs <br />11111111 <br />fsdfs <br />11111111 <br />
    fsdfs <br />fsdfs <br />11111111 <br />fsdfs <br />11111111 <br />
    fsdfs <br />fsdfs <br />11111111 <br />fsdfs <br />11111111 <br />
    fsdfs <br />fsdfs <br />11111111 <br />fsdfs <br />11111111 <br />
    fsdfs <br />fsdfs <br />11111111 <br />fsdfs <br />11111111 <br />
    fsdfs <br />fsdfs <br />11111111 <br />fsdfs <br />11111111 <br />
    -->
    </div>
    <div id="scrollBar">
    <div id="scrollBarTop" class="scroll_bar_top"> </div>
    <div id="scrollBarHandle"> </div>
    <div id="scrollBarBottom" class="scroll_bar_bottom"> </div>
    </div>
    </div>
    <h1>图片自定义滚动条（Michael Jackson怀念版1.0，天堂从此有了太空舞步！） </h1>
    <ol>
    <li>支持任意形式（包括图片自定义）的美化扩展，跨 <a href='http://www.pcyyjs.com/soft/wyll/' target='_blank'> <u>浏览器 </u> </a>支持 </li>
    <li>支持鼠标按住上、下箭按钮实现上下滚动 </li>
    <li>支持鼠标滚轮放于“滚动条区”滚动，而不仅限放于滚动内容区才滚 </li>
    <li>支持鼠标按住滚动条（未松开）并移出滚动区域仍然能拖拽滚动 </li>
    <li>滚动条子根据左边滚动内容高与可视区域高度比例等比例，且当滚动条细到一定程度时设置最小高度值 </li>
    <li>支持鼠标在滚动条子的上下空白区间点击实现上、下定位滚动（模拟windows滚动条） </li>
    <li>当页面body有滚动条时，鼠标放于自定义滚动区滚动滚轮，不会造成页面的滚动 </li>
    </ol>
    <p>由于时间仓促代码并没有OO封装和优化，期待大家帮忙寻找bug并提出宝贵建议，将在下一版本完善，谢谢（ <a href='http://www.pcyyjs.com/soft/chat/' target='_blank'> <u>QQ </u> </a>：149561420，gTalk：[email protected]）。 </p>
    <script>
    var ximen = {
    $:function(o){ return document.getElementById(o); },
    getStyle:function(o) { return o.currentStyle||document.defaultView.getComputedStyle(o,null); },
    getOffset:function(o) {
    var t = o.offsetTop,h = o.offsetHeight;
    while(o = o.offsetParent) { t += o.offsetTop; }
    return { top:t, height:h };
    },
    bind:function(o,eType,fn) {
    if(o.addEventListener) { o.addEventListener(eType,fn,false); }
    else if(o.attachEvent) { o.attachEvent("on" + eType,fn); }
    else { o["on" + eType] = fn; }
    },
    unbind:function(o,eType,fn) {
    if(o.removeEventListener) { o.removeEventListener(eType,fn,false); }
    else if(o.detachEvent) { o.detachEvent("on" + eType,fn); }
    else { o["on" + eType] = fn; }
    },
    stopPropagate:function(e) {
    if(e && e.stopPropagation) { e.stopPropagation(); }
    else { window.event.cancelBubble = true; }
    return false;
    },
    stopDefault:function(e) {
    e = e || window.event;
    e.stopPropagation && (e.preventDefault(),e.stopPropagation()) || (e.cancelBubble = true,e.returnValue = false);
    }
    };
    (function(){
    var myScrollDown,myScrollUp,scrollBarMouseDown,scrollBarMouseUp,relY,
    out = ximen.$("out"),
    content = ximen.$("content"),
    scrollBar = ximen.$("scrollBar"),
    scrollBarTop = ximen.$("scrollBarTop"),
    scrollBarHandle = ximen.$("scrollBarHandle"),
    scrollBarBottom = ximen.$("scrollBarBottom"),
    scrollBarUpHeight = parseInt(ximen.getStyle(scrollBarTop).height),
    scrollBarBottomHeight = parseInt(ximen.getStyle(scrollBarBottom).height),
    contentScrollHeight = content.scrollHeight, //将content.scrollHeight赋一次值,解决IE6下scrollHeight需调用两次的bug
    scrollBarHandleHeight = parseInt(content.offsetHeight/content.scrollHeight * (scrollBar.offsetHeight - scrollBarUpHeight - scrollBarBottomHeight)),setScrollBarHandle = function() { //当内容超多时设置拖拽条子的最小高度
    var maxH = parseInt(ximen.getStyle(out).height) - parseInt(ximen.getStyle(scrollBarTop).height) - parseInt(ximen.getStyle(scrollBarBottom).height);
    scrollBarHandle.style.top = scrollBarUpHeight + "px";
    if(scrollBarHandleHeight > 15)
    { 
    scrollBarHandle.style.height = scrollBarHandleHeight + "px";
    scrollBarHandle.style.visibility = (scrollBarHandleHeight >= maxH)?'hidden':'visible';
    }else{ 
    scrollBarHandleHeight = 15; scrollBarHandle.style.height = "15px"; 
    }
    },
    clearAllInterval = function() { clearInterval(myScrollDown); clearInterval(myScrollUp); clearInterval(scrollBarMouseDown); },
    forMousemove = function(e) {
    var e = e || window.event;
    content.scrollTop = (e.clientY - relY - scrollBarUpHeight)/(scrollBar.offsetHeight - scrollBarHandleHeight - scrollBarUpHeight - scrollBarBottomHeight)*(content.scrollHeight - content.offsetHeight);
    },
    forMouseDown = function(event){
    var et = event.target || event.srcElement;
    relY = event.clientY - et.offsetTop;
    ximen.bind(document,"mousemove",forMousemove);
    },
    scrollDir = function(e) {
    var e = e || window.event,eDir; //设置滚轮事件,e.wheelDelta与e.detail分别兼容IE、W3C，根据返回值的正负来判断滚动方向
    if(e.wheelDelta) { eDir = e.wheelDelta/120; }
    else if(e.detail) { eDir = -e.detail/3; }
    if(eDir > 0) { content.scrollTop -= 80; } //步长设80像素a比较接近window滚动条的滚动速度
    else { content.scrollTop += 80; }
    ximen.stopDefault(e);
    },
    scrollBarClick = function(e) {
    var e = e || window.event,
    mStep = scrollBar.offsetHeight,
    documentScrollTop = document.documentElement.scrollTop,
    hOffset = ximen.getOffset(scrollBarHandle);
    if(documentScrollTop + e.clientY < hOffset.top) { scrollBarMouseDown = setInterval(function(){ content.scrollTop -= 15; },10); }
    else if(documentScrollTop + e.clientY > hOffset.top + hOffset.height) { scrollBarMouseDown = setInterval(function(){ content.scrollTop += 15; },10); }
    };
    setScrollBarHandle();
    ximen.bind(content,"scroll",function(){
    scrollBarHandle.style.top = content.scrollTop/(content.scrollHeight - content.offsetHeight) * (scrollBar.offsetHeight - scrollBarHandleHeight - scrollBarUpHeight - scrollBarBottomHeight) + scrollBarUpHeight + "px";
    });
    ximen.bind(scrollBarBottom,"mousedown",function(){ myScrollDown = setInterval(function(){ content.scrollTop += 15; },10); });
    ximen.bind(scrollBarTop,"mousedown",function(){ myScrollUp = setInterval(function(){ content.scrollTop -= 15; },10); });
    ximen.bind(scrollBarBottom,"mouseup",clearAllInterval);
    ximen.bind(scrollBarBottom,"mouseout",clearAllInterval);
    ximen.bind(scrollBarTop,"mouseup",clearAllInterval);
    ximen.bind(scrollBarTop,"mouseout",clearAllInterval);
    ximen.bind(scrollBarHandle,"mousedown",forMouseDown);
    ximen.bind(document,"mouseup",function(){
    ximen.unbind(document,"mousemove",forMousemove);
    ximen.unbind(scrollBarHandle,"mousemove",forMousemove);
    });
    ximen.bind(out,"selectstart",function(){ return false; });
    ximen.bind(out,"select",function(){ document.selection.empty(); });
    ximen.bind(out,"mousewheel",scrollDir);
    ximen.bind(out,"DOMMouseScroll",scrollDir);
    ximen.bind(scrollBar,"mousedown",scrollBarClick);
    ximen.bind(scrollBar,"mouseup",clearAllInterval);
    ximen.bind(scrollBarTop,"click",function(event){ ximen.stopPropagate(event); });
    ximen.bind(scrollBarTop,"mousedown",function(){ scrollBarTop.className = "scroll_bar_top_a"; });
    ximen.bind(scrollBarTop,"mouseup",function(){ scrollBarTop.className = "scroll_bar_top"; });
    ximen.bind(scrollBarTop,"mouseout",function(){ scrollBarTop.className = "scroll_bar_top"; });
    ximen.bind(scrollBarBottom,"click",function(event){ ximen.stopPropagate(event); });
    ximen.bind(scrollBarBottom,"mousedown",function(){ scrollBarBottom.className = "scroll_bar_bottom_a"; });
    ximen.bind(scrollBarBottom,"mouseup",function(){ scrollBarBottom.className = "scroll_bar_bottom"; });
    ximen.bind(scrollBarBottom,"mouseout",function(){ scrollBarBottom.className = "scroll_bar_bottom"; });
    })();
    </script>
    </body>
    </html>
      

  2.   

    多谢6楼的兄弟，加了句scrollBarHandle.style.visibility = (scrollBarHandleHeight >= maxH)?'hidden':'visible';就解决了，高手啊~，暂时不结贴，可能还有其他的问题要请教大家。总之，非常感谢。我去试试看，然后有问题再向大家请教。
      

  3.   

    发现一个问题，按照六楼的兄弟那样写了以后当页面很大的时候滚动条也不会显示了。
    注：我的scrollHandle的高度是需要固定的。
      

  4.   

    我找到问题了，是maxH的计算问题。
    我改成var maxH = parseInt(content.scrollHeight - scrollBarUpHeight - scrollBarBottomHeight);就好了。
    但是现在还有一个问题，就是说我这个html的文本是动态变化的，也就是说不定时的会往其中插入文本，当插入文本后，滚动条的长度不会变化。必须要滚动一下，他才会重新计算这个长度，请问怎么做可以在插入文本的同时，改变滚动条的长度？我对javaScript基本没有接触过，请各位赐教啊。