问点小问题啊
<textarea>
<ul>
<li value=1>hello</li>
<li value=2>hello</li>
<li value=3>hello</li>
</ul>
</textarea>
谁能帮我简单美化一下写点css，现在显示都成问题
2:百度间乐盒左下角的上下条，点击能滑动
这部分应该叫什么？谁有个好看的demo
搜"上下滚滑栏"，结果为零，汗~
[解决办法]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 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=gbk" /><title>模拟滚动条</title></head><body><div style="width:600px; height:500px; position:relative;"> <div style="width:550px; height:500px; background:#CCCCCC; overflow:hidden; position:absolute; left:0; top:0; word-wrap:break-word;" class="aa" id="test_container"> <div style="position:absolute; top:0;" id="test_shower"> <div>一一一一一一一一一一</div> <div>二二二二二二二二二二</div> <div>三三三三三三三三三三</div> <div>四四四四四四四四四四</div> <div>五五五五五五五五五五</div> <div>六六六六六六六六六六</div> <div>七七七七七七七七七七</div> <div>八八八八八八八八八八</div> <div>九九九九九九九九九九</div> <div>十十十十十十十十十十</div> <div>一一一一一一一一一一</div> <div style="width:350px; height:300px; position:relative;"> <div style="width:300px; height:300px; background:#CCCCCC; overflow:hidden; position:absolute; left:0; top:0; word-wrap:break-word;" class="aa" id="ins_container"> <div style="position:absolute; top:0;" id="ins_shower"> <div>一一一一一</div> <div>二二二二二</div> <div>三三三三三</div> <div>四四四四四</div> <div>五五五五五</div> <div>六六六六六</div> <div>七七七七七</div> <div>八八八八八</div> <div>九九九九九</div> <div>十十十十十</div> <div>一一一一一</div> <div>二二二二二</div> <div>三三三三三</div> <div>四四四四四</div> <div>五五五五五</div> <div>六六六六六</div> <div>七七七七七</div> <div>八八八八八</div> <div>九九九九九</div> <div>十十十十十</div> </div> </div> <div style="position:absolute; left:300px; top:0; width:20px; height:300px; -moz-user-focus:ignore;-moz-user-input:disabled;-moz-user-select:none;" id="ins_scroller"> <div style="position:absolute; background:#999999; width:20px; height:20px; left:0; top:0;" id="ins_scroll_up"></div> <div style="position:absolute; width:20px; height:100px; background:#000000; left:0; top:20px;" id="ins_scroll_bar"></div> <div style="position:absolute; background:#999999; width:20px; height:20px; left:0; bottom:0;" id="ins_scroll_down"></div> </div> </div> <div>二二二二二二二二二二</div> <div>三三三三三三三三三三</div> <div>四四四四四四四四四四</div> <div>五五五五五五五五五五</div> <div>六六六六六六六六六六</div> <div>七七七七七七七七七七</div> <div>八八八八八八八八八八</div> <div>九九九九九九九九九九</div> <div>十十十十十十十十十十</div> </div> </div> <div style="position:absolute; left:550px; top:0; width:20px; height:500px; -moz-user-focus:ignore;-moz-user-input:disabled;-moz-user-select:none;" id="test_scroller"> <div style="position:absolute; background:#999999; width:20px; height:20px; left:0; top:0;" id="test_scroll_up"></div> <div style="position:absolute; width:20px; height:100px; background:#000000; left:0; top:20px;" id="test_scroll_bar"></div> <div style="position:absolute; background:#999999; width:20px; height:20px; left:0; bottom:0;" id="test_scroll_down"></div> </div></div><script type="text/javascript">var now_wheel = null;var scroller = function(a){ var self = this; var timer; this.container = document.getElementById(a+"_container"); // 容器 this.shower = document.getElementById(a+"_shower"); // 显示的内容 this.scroller = document.getElementById(a+"_scroller"); // 滚动条容器 this.scroll_up = document.getElementById(a+"_scroll_up"); // 上翻按钮 this.scroll_down = document.getElementById(a+"_scroll_down"); // 下翻按钮 this.scroll_bar = document.getElementById(a+"_scroll_bar"); // 滑动块 this.clearselect = window.getSelection ? function(){ window.getSelection().removeAllRanges(); } : function(){ document.selection.empty(); }; this.is_bottom = function(){ // 检测是不是位于底部了 if (self.shower.offsetTop <= self.container.offsetHeight-self.shower.offsetHeight){ return true; } return false; } this.resetright = function(){ var a = self.shower.offsetTop / (self.shower.offsetHeight - self.container.offsetHeight); var b = self.scroller.offsetHeight - self.scroll_down.offsetHeight - self.scroll_bar.offsetHeight - self.scroll_up.offsetHeight; var c = self.scroll_up.offsetHeight + (0 - b * a); self.scroll_bar.style.top = c + "px"; } this.resetleft = function(){ var a = (self.scroll_bar.offsetTop - self.scroll_up.offsetHeight) / (self.scroller.offsetHeight - self.scroll_up.offsetHeight - self.scroll_down.offsetHeight - self.scroll_bar.offsetHeight); var b = self.shower.offsetHeight - self.container.offsetHeight; var c = 0 - (b * a); self.shower.style.top = c + "px"; } this.move=function(a){ if (self.shower.offsetTop+a <= 0 && self.shower.offsetTop+a >= self.container.offsetHeight-self.shower.offsetHeight){ self.shower.style.top = (self.shower.offsetTop+a)+"px"; }else if (self.shower.offsetTop+a > 0){ self.shower.style.top = 0+"px"; }else if (self.shower.offsetTop+a < self.container.offsetHeight-self.shower.offsetHeight){ self.shower.style.top = self.container.offsetHeight-self.shower.offsetHeight+"px"; } self.resetright(); } this.upper = function(){ self.clear(); timer = window.setInterval(function(){self.move(2);}, 5); } this.downer = function(){ self.clear(); timer = window.setInterval(function(){self.move(-2);}, 5); } this.clear = function(){ window.clearInterval(timer); } this.test_bar = function(){ if (self.container.offsetHeight < self.shower.offsetHeight){ self.scroller.style.display = "block"; }else { self.scroller.style.display = "none"; } } this.gotobottom = function(){ var a = (self.shower.offsetHeight > self.container.offsetHeight) ? self.container.offsetHeight - self.shower.offsetHeight : 0; self.shower.style.top = a + "px"; self.test_bar(); self.resetright(); } this.wheel = function(){ if (now_wheel == null) now_wheel =a; if (now_wheel == a){ var e=arguments[0]||window.event; var act = e.wheelDelta ? e.wheelDelta/120 : (0 -e.detail/3); self.clear(); self.move(80*act); try{ e.preventDefault();} catch(e){} } window.setTimeout(function(){self.end_wheel();}, 1); return false; } this.end_wheel = function(){ now_wheel = null; } this.barmove = function(){ // 记录当时鼠标的位置与 self.clearselect; var mover = this; this.can_move_top = self.scroll_bar.offsetTop - self.scroll_up.offsetHeight; // 这个滚动条上方的可移动距离 this.can_move_bottom = self.scroller.offsetHeight - self.scroll_bar.offsetTop - self.scroll_down.offsetHeight - self.scroll_bar.offsetHeight; // 这个滚动条下方的可移动距离 this.e=arguments[0]||window.event; this.starts = this.e.clientY; this.starttop = self.scroll_bar.offsetTop; this.drag = function(){ this.e=arguments[0]||window.event; this.ends = this.e.clientY; this.dis = this.ends - mover.starts; if (this.dis < (0-mover.can_move_top)) this.dis = 0-mover.can_move_top; if (this.dis > mover.can_move_bottom) this.dis = mover.can_move_bottom; self.scroll_bar.style.top = (mover.starttop + this.dis) + "px"; self.resetleft(); self.clearselect; } this.cleardrag = function(){ if (window.removeEventListener){ document.removeEventListener("mousemove", mover.drag, true); }else { document.detachEvent("onmousemove", mover.drag); } self.clearselect; } this.add_listener = function(){ if (window.addEventListener){ document.addEventListener("mousemove", mover.drag, true); document.addEventListener("mouseup", mover.cleardrag, true); }else { document.attachEvent("onmousemove", mover.drag); document.attachEvent("onmouseup", mover.cleardrag); } } this.add_listener(); } this.outbar = function(){ var e=arguments[0]||window.event; var obj = e.srcElement ? e.srcElement : e.target; if (obj.id == self.scroller.id){ var y = e.offsetY || e.layerY; var new_top = y - 0.5 * self.scroll_bar.offsetHeight; if (y - self.scroll_up.offsetHeight < 0.5 * self.scroll_bar.offsetHeight) new_top = self.scroll_up.offsetHeight; if (self.scroller.offsetHeight - y - self.scroll_down.offsetHeight < 0.5 * self.scroll_bar.offsetHeight) new_top = self.scroller.offsetHeight - self.scroll_down.offsetHeight - self.scroll_bar.offsetHeight; self.scroll_bar.style.top = new_top + "px"; self.resetleft(); } } this.scroll_bar.ondrag=function(){return false;} this.scroll_bar.oncontextmenu=function(){return false;} this.scroll_bar.onselectstart=function(){return false;} if (window.addEventListener){ this.scroll_up.addEventListener("mousedown", this.upper, false); this.scroll_down.addEventListener("mousedown", this.downer, false); this.scroll_bar.addEventListener("mousedown", this.barmove, false); this.scroller.addEventListener("mousedown", this.outbar, false); this.container.parentNode.addEventListener("DOMMouseScroll", this.wheel, false); this.container.parentNode.addEventListener("mousewheel", this.wheel, false); document.addEventListener("mouseup", this.clear, false); }else { this.scroll_up.attachEvent("onmousedown", this.upper); this.scroll_down.attachEvent("onmousedown", this.downer); this.scroll_bar.attachEvent("onmousedown", this.barmove); this.scroller.attachEvent("onmousedown", this.outbar); this.container.parentNode.attachEvent("onmousewheel", this.wheel); document.attachEvent("onmouseup", this.clear); try{ window.event.cancelBubble=true;} catch(e){} }}var te = new scroller("test");var ins = new scroller("ins");</script></body></html>