葬花词 诗歌滚动条 案例
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
/*
----------KISSY CSS Reset----------
KISSY CSS Reset
理念：1. reset 的目的不是清除浏览器的默认样式，这仅是部分工作。清除和重置是紧密不可分的。
2. reset 的目的不是让默认样式在所有浏览器下一致，而是减少默认样式有可能带来的问题。
3. reset 期望提供一套普适通用的基础样式。但没有银弹，推荐根据具体需求，裁剪和修改后再使用。
*/
/** 清除内外边距 **/
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 结构元素 */
dl, dt, dd, ul, ol, li, /* list elements 列表元素 */
pre, /* text formatting elements 文本格式元素 */
form, fieldset, legend, button, input, textarea, /* form elements 表单元素 */
th, td /* table elements 表格元素 */ {
margin: 0;
padding: 0;
}
/** 设置默认字体 **/
body,
button, input, select, textarea /* for ie */ {
font: 12px/1.5 tahoma, arial, \5b8b\4f53, sans-serif;
}
h1, h2, h3, h4, h5, h6 { font-size: 100%; }
address, cite, dfn, em, var { font-style: normal; } /* 将斜体扶正 */
code, kbd, pre, samp { font-family: courier new, courier, monospace; } /* 统一等宽字体 */
small { font-size: 12px; } /* 小于 12px 的中文很难阅读，让 small 正常化 */
/** 重置列表元素 **/
ul, ol { list-style: none; }
/** 重置文本格式元素 **/
a { text-decoration: none; }
a:hover { text-decoration: underline; }
sup { vertical-align: text-top; } /* 重置，减少对行高的影响 */
sub { vertical-align: text-bottom; }
/** 重置表单元素 **/
legend { color: #000; } /* for ie6 */
fieldset, img { border: 0; } /* img 搭车：让链接里的 img 无边框 */
button, input, select, textarea { font-size: 100%; } /* 使得表单元素在 ie 下能继承字体大小 */
/* 注：optgroup 无法扶正 */
/** 重置表格元素 **/
table { border-collapse: collapse; border-spacing: 0; }
.scroll-box{
float: left;
margin-right: 40px;
margin-top: 40px;
}
.scroll-box{
position: relative;
font-size: 18px;
color:#000;
line-height: 1.6;
width: 500px;
height: 400px;
border: 2px solid #FCC;
background-color:#FCC ;
padding: 30px 60px 0 30px;
}
.scroll-panel{
position: relative;
height: 340px;
overflow: hidden;
}
.scroll-content{
position: relative;
}
.scroll-bar{
position: absolute;
top: 2px;
right: -156px;
width: 20px;
height: 360px;
background-color:#FFC;
}
.scroll-block{
position: absolute;
top:4px;
right: -4px;
width: 28px;
height:16px;
background-color:#CFF;
cursor: pointer;
}
</style>
</head>
<body>
<div class="scroll-box scroll-box-1">
<div class="scroll-panel" id="scrollpanel">
<div class="scroll-content" id="scrollcontent">
<h2>start.</h2>
<pre>
<p>《葬花词》</p>
<p><br>
花谢花飞飞满天，<br>
红消香断有谁怜。<br>
游丝软细飘春榭，<br>
落絮轻粘扑绣窗。</p>
<p><br>
闺中女儿惜春暮， <br>
愁绪满怀无著处。<br>
手把花锄出绣窗，<br>
忍踏落花来复去。<br>
柳丝榆荚自芳菲，<br>
哪管桃飘与李飞。<br>
桃李明年能再发，<br>
明年闺中知有谁。<br>
三月香巢初垒成， <br>
梁间燕子太无情。<br>
明年花发虽可啄，<br>
却不道人去梁空巢已倾。</p>
<p><br>
一年三百六十日，<br>
风刀霜剑严相逼。<br>
明媚鲜妍能几时，<br>
一朝漂泊难寻觅。<br>
花开易见落难寻，<br>
阶前愁煞葬花人。<br>
独把花锄偷洒泪，<br>
洒上空枝见血痕。<br>
杜鹃无语正黄昏，<br>
荷锄归去掩重门。</p>
<p><br>
青灯照壁人初睡，<br>
冷雨敲窗被未温。<br>
怪侬底事倍伤神，<br>
半为怜春半恼春。 <br>
怜春忽至恼忽去，<br>
至又无言去不闻。<br>
昨宵亭外悲歌发，<br>
知是花魂与鸟魂。 <br>
花魂鸟魂总难留，<br>
鸟自无言花自羞。</p>
<p><br>
愿侬此日生双翼，<br>
随花飞到天尽头。<br>
天尽头，何处有香丘。<br>
未若锦囊收其骨， <br>
一坯净土掩风流。 <br>
质本洁来还洁去， <br>
不教污淖陷渠沟。 <br>
尔今死去侬收葬，<br>
未卜侬身何日丧。</p>
<p><br>
侬今葬花人笑痴， <br>
他年葬侬知是谁。 <br>
试看春残花渐落， <br>
便是红颜老死时。 <br>
一朝春尽红颜老， <br>
花落人亡两不知。<br>
</pre>
<h2>end.</h2>
</div>
</div>
<div class="scroll-bar" id="scrollbar">
<div class="scroll-block" id="scrollblock"></div>
</div>
</div>
<script type="text/javascript" >
// enclose(document.getElementById('content'),400,200,-200,-300);
function enclose(frame,content,bar,block,bdistance,cdistance,minutop){
var isMacWebkit=(navigator.userAgent.indexOf('Macintosh')!==-1&&
navigator.userAgent.indexOf('WebKit')!==-1);
var isFirefox=(navigator.userAgent.indexOf('Gecko')!==-1);
var contentX=content.offsetLeft,
contentY=content.offsetTop,
framewidth=frame.offsetWidth,
frameheight=frame.offsetHeight;
frame.onwheel=wheelHandler; //未来浏览器
frame.onmousewheel=wheelHandler; //大多数当前浏览器
if(isFirefox){ //仅firefox
frame.addEventListener('DOMMouseScroll',wheelHandler,false);
}
function wheelHandler(event){
var e=event||window.event;
var deltaX=e.deltaX*-30||
e.wheelDeltaX/4||
0;
var deltaY=e.deltaY*-30||
e.wheelDeltaY/4||
(e.wheelDeltaY===undefined&&
e.wheelDelta/4)||
e.detail*-10||
0;
if(isMacWebkit){
deltaX/=30;
deltaY/=30;
}
if(isFirefox&&e.type!=='DOMMouseScroll'){
frame.removeEventListener('DOMMouseScroll',wheelHandler,false);
}
var contentbox=content.getBoundingClientRect(),
contentwidth=contentbox.right-contentbox.left,
contentheight=contentbox.bottom-contentbox.top;
if(e.altKey){
if(deltaX){
framewidth-=deltaX;
framewidth=Math.min(framewidth,contentwidth);
framewidth=Math.max(framewidth,50);
frame.style.width=framewidth+'px';
}
if(deltaY){
frameheight-=deltaY;
frameheight=Math.min(frameheight,contentheight);
frameheight=Math.max(frameheight,50);
frame.style.height=frameheight+'px';
}
}else{
if(deltaX){
contentX=content.offsetLeft;
var minoffset=Math.min(framewidth-contentwidth,0);
contentX=Math.max(contentX+deltaX,minoffset);
contentX=Math.min(contentX,0);
content.style.left=contentX+'px';
}
if(deltaY){
contentY=content.offsetTop;
var minoffset=Math.min(frameheight-contentheight,0);
contentY=Math.max(contentY+deltaY,minoffset);
contentY=Math.min(contentY,0);
content.style.top=contentY+'px';
block.style.top=(-contentY/cdistance*bdistance+minutop)+'px';
}
}
if(e.preventDefault){
e.preventDefault();
}
if(e.stopPropagation){
e.stopPropagation();
}
e.cancelBubble=true;
e.returnValue=false;
return false;
}
}
</script>
<script type="text/javascript">
var scroll=(function(){
var scrollblock, //滚动块
scrollcontent, //被滚动的内容
scrollbar, //滚动条
scrollpanel, //滚动内容的滚动区域
cdistance, //滚动内容要滚动的距离
bdistance, //滚动块要滚动的距离
minuTop, //滚动条头尾剩下的空白
cTop, //滚动内容的top
startY=0, //滚动动作开始初鼠标的位置
bTop=0; //滚动动作开始初滚动块的top
function mouseDown(event){
event=event||window.event;
startY=event.clientY;
bTop=scrollblock.offsetTop;
cTop=scrollcontent.offsetTop;
// if(scrollblock.setCapture){
// scrollblock.onmousemove=doDrag;
// scrollblock.onmouseup=stopDrag;
// scrollblock.setCapture();
// }else{
// document.addEventListener("mousemove",doDrag,true);
// document.addEventListener("mouseup",stopDrag,true);
// }
document.onmousemove=function(){
doDrag();
}
document.onmouseup=function(){
stopDrag();
}
document.getElementsByTagName('body')[0].onselectstart=function(){
return false;
}
}
function doDrag(event){
event=event||window.event;
var newbTop=event.clientY-startY+bTop,
newcTop=cTop-(event.clientY-startY)/bdistance*cdistance;
if(newbTop<minuTop){
newbTop=minuTop;
newcTop=0;
}else if(newbTop>bdistance+minuTop){
newcTop=-cdistance;
newbTop=bdistance+minuTop;
}
scrollblock.style.top=newbTop+'px';
scrollcontent.style.top=newcTop+'px';
}
function stopDrag(event){
// if(scrollblock.releaseCapture){
// // scrollblock.onmousemove=doDrag;
// // scrollblock.onmouseup=stopDrag;
// scrollblock.releaseCapture();
// }else{
// document.removeEventListener("mousemove",doDrag,true);
// document.removeEventListener("mouseup",stopDrag,true);
// }
document.onmousemove=null;
document.onmouseup=null;
document.getElementsByTagName('body')[0].onselectstart=function(){
return true;
};
}
return{
init:function(scrollpanel_id,scrollcontent_id,scrollbar_id,scrollblock_id){
scrollblock=document.getElementById(scrollblock_id);
scrollcontent=document.getElementById(scrollcontent_id);
scrollbar=document.getElementById(scrollbar_id);
scrollpanel=document.getElementById(scrollpanel_id);
minuTop=scrollblock.offsetTop;
cdistance=scrollcontent.offsetHeight-scrollpanel.offsetHeight;
bdistance=scrollbar.offsetHeight-minuTop*2-scrollblock.offsetHeight;
scrollblock.onmousedown=mouseDown;
enclose(scrollpanel,scrollcontent,scrollbar,scrollblock,bdistance,cdistance,minuTop);
}
}
}());
scroll.init('scrollpanel','scrollcontent','scrollbar','scrollblock');
</script>
</body>
</html>
