<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>拖拽+滚动条</title> <meta name="description" content=""> <meta name="keywords" content=""> <style> *{margin:0; padding: 0;} body{font-family:14px/100% "microsoft yahei"; } #f-wrap{width: 1000px; margin: 0 auto; padding: 10px; border:1px dotted green;} #box{width:820px; padding-right:12px; height:500px; border:1px solid #ccc; overflow: hidden; position: relative;} /*内容区*/ #cnt{width:800px; line-height:24px; position:absolute; padding:10px; background-color:#fff;} /*滚动条*/ #scrollBd{width:12px; height:500px; background-color:#ddd; position:absolute; top:0; right:0;} #scrollBar{width:12px; height:50px; background-color:#aaa; position: absolute; cursor: pointer; -webkit-border-radius:12px; -moz-border-radius:12px; -o-border-radius:12px; border-radius:12px;} </style> <script type="text/javascript"> window.onload= function(){ var oWrap = document.getElementById('f-wrap'), oScroll = document.getElementById('scrollBd'), oBar = document.getElementById('scrollBar'), oBox = document.getElementById('box'), oCnt = document.getElementById('cnt'); // 点击执行 oBar.onmousedown = function(e){ var e = e||event; var disY = e.clientY - oBar.offsetTop; if(oBar.setCapture){ oBar.onmousemove = fnMove; oBar.onmouseup = fnUp; oBar.setCapture(); }else{ document.onmousemove = fnMove; document.onmouseup = fnUp; } // 移动 function fnMove(e){ var e = e||event; var t = e.clientY - disY; setTop(t); } // 弹起 function fnUp(){ this.onmousemove = null; this.onmouseup = null; if(this.releaseCapture){ this.releaseCapture(); } } return false; } // 滚动 function fnWheel(e){ var e = e||event; var flag =true; flag = e.wheelDelta ? e.wheelDelta<0 : e.detail>0; if(flag){ setTop(oBar.offsetTop+10); }else{ setTop(oBar.offsetTop-10) } if(e.preventDefault){ e.preventDefault(); } return false; } addEvent(oWrap,'mousewheel',fnWheel); addEvent(oWrap,'DOMMouseScroll',fnWheel); function setTop(t){ if(t<=0){ t=0; }else if(t >= oScroll.offsetHeight - oBar.offsetHeight){ t = oScroll.offsetHeight - oBar.offsetHeight; } oBar.style.top = t +'px'; // 滑块所占比例 var scale = t/(oScroll.offsetHeight - oBar.offsetHeight); oCnt.style.top = -(oCnt.offsetHeight - box.offsetHeight) * scale + 'px'; document.title= scale; } } // 浏览器兼容:封装事件绑定 function addEvent(obj,sEvent,fn){ if(obj.attachEvent){ obj.attachEvent('on'+ sEvent,fn); }else{ obj.addEventListener(sEvent,fn,false); } } </script> </head> <body> <div id="f-wrap"> <span style="float:right; font-size:20px; color:#999;">可执行区域</span> <div id="box"> <div id="scrollBd"> <div id="scrollBar"></div> </div> <div id="cnt"> <h2>小苹果</h2> <p>我种下一颗种子</p> <p>终于长出了果实</p> <p>今天是个伟大日子</p> <p>摘下星星送给你</p> <p>拽下月亮送给你</p> <p>让太阳每天为你升起</p><br> <p>变成蜡烛燃烧自己</p> <p>只为照亮你</p> <p>把我一切都献给你</p> <p>只要你欢喜</p> <p>你让我每个明天都</p> <p>变得有意义</p> <p>生命虽短爱你永远</p> <p>不离不弃</p><br> <p>你是我的小呀小苹果儿</p> <p>怎么爱你都不嫌多</p> <p>红红的小脸儿温暖我的心窝</p> <p>点亮我生命的火 火火火火</p> <p>你是我的小呀小苹果儿</p> <p>就像天边最美的云朵</p> <p>春天又来到了花开满山坡</p> <p>种下希望就会收获</p><br> <p>从不觉得你讨厌</p> <p>你的一切都喜欢</p> <p>有你的每天都新鲜</p> <p>有你阳光更灿烂</p> <p>有你黑夜不黑暗</p> <p>你是白云我是蓝天</p><br> <p>春天和你漫步在盛开的 花丛间</p> <p>夏天夜晚陪你一起看 星星眨眼</p> <p>秋天黄昏与你徜徉在 金色麦田</p> <p>冬天雪花飞舞有你 更加温暖</p><br> <p>你是我的小呀小苹果儿</p> <p>怎么爱你都不嫌多</p> <p>红红的小脸儿温暖我的心窝</p> <p>点亮我生命的火 火火火火</p> <p>你是我的小呀小苹果儿</p> <p>就像天边最美的云朵</p> <p>春天又来到了花开满山坡</p> <p>种下希望就会收获</p><br> <p>你是我的小呀小苹果儿</p> <p>怎么爱你都不嫌多</p> <p>红红的小脸儿温暖我的心窝</p> <p>点亮我生命的火 火火火火</p> <p>你是我的小呀小苹果儿</p> <p>就像天边最美的云朵</p> <p>春天又来到了花开满山坡</p> <p>种下希望就会收获</p> </div> </div> </div> </body> </html>
拖拽+自定义滚动条
时间: 2024-10-08 04:43:19