模拟滚动条，文字内容跟随滚动条滑动的反方向同比例移动
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 div,p{ 8 padding: 0; 9 margin:0; 10 } 11 .box{ 12 350px; 13 border: 1px solid red; 14 } 15 .clear:after{ 16 clear: both; 17 display: block; 18 content: '20'; 19 } 20 .content{ 21 300px; 22 height: 500px; 23 background: #ccc; 24 float: left; 25 font-size: 14px; 26 font-family: "微软雅黑"; 27 line-height: 1.5; 28 position: relative; 29 overflow: hidden; 30 } 31 .content p{ 32 position:absolute; 33 left:0px; 34 top:0px; 35 padding:0 10px; 36 } 37 .scroll{ 38 49px; 39 height: 500px; 40 background: #abcdef; 41 float: right; 42 position: relative; 43 border-left: 1px solid #000; 44 } 45 .drag{ 46 49px; 47 height: 80px; 48 background: orange; 49 position: absolute; 50 } 51 </style> 52 </head> 53 <body> 54 <div class="box clear"> 55 <div class="content" id="content"> 56 <p> 57 新华社北京4月13日电 题：千年大计、国家大事——以同志为核心的党中央决策河北雄安新区规划建设纪实 58 新华社记者4月初的白洋淀，绿柳婆娑，碧波荡漾，放眼水鸟嬉戏，听闻蛙声一片。 60 襟带崇墉分淀泊，阑干依斗望京华——河北安新县白洋淀凉亭上的这副楹联，在这个春天里，与位于东北方向100多公里的首都北京，有了不同寻常的关联。 62 2017年4月1日，新华通讯社受权发布：中共中央、国务院决定设立河北雄安新区。消息一出，犹如平地春雷，响彻大江南北。 63 涉及河北省雄县、容城、安新3县及周边部分区域的雄安新区，迅速成为海内外高度关注的焦点。 64 设立雄安新区是以同志为核心的党中央作出的一项重大的历史性战略选择。这是继深圳经济特区和上海浦东新区之后又一具有全国意义的新区，是千年大计、国家大事。 65 党的十八大以来，同志为核心的党中央高瞻远瞩、深谋远虑，着眼党和国家发展全局，立足大历史观，深入推进京津冀协同发展战略，以规划建设河北雄安新区为重要突破口，探索人口经济密集地区优化开发的新模式，谋求区域发展的新路子，打造经济社会发展新的增长极。 93 </p> 94 </div> 95 <div class="scroll" id="scroll"> 96 <div class="drag" id="drag"></div> 97 </div> 98 </div> 99 <script type="text/javascript"> 100 var oDrag=document.getElementById('drag'); 101 var oScroll=document.getElementById('scroll'); 102 var oContent=document.getElementById('content'); 103 var oP=document.getElementsByTagName('p')[0]; 104 var shorty=0; 105 oDrag.onmousedown=function(ev){ 106 var ev=ev||window.event; 107 shorty=ev.offsetY; 108 document.onmousemove=function(ev){ 109 var ev=ev||window.event; 110 var t=ev.clientY-shorty; 111 if(t<0){ 112 t=0; 113 }else if(t>=oScroll.offsetHeight-oDrag.offsetHeight){ 114 t=oScroll.offsetHeight-oDrag.offsetHeight; 115 } 116 117 //算比例0-1之间 118 var scale=t/(oScroll.offsetHeight-oDrag.offsetHeight); 119 //左边文字移动比例完全按照右边滚轮的比例来移动的，比例是一致的。 120 oP.style.top=-scale*(oP.offsetHeight-oContent.offsetHeight)+'px'; 121 122 oDrag.style.top=t+'px'; 123 } 124 document.onmouseup=function(){ 125 document.onmousemove=null; 126 document.onmouseup=null; 127 } 128 return false; 129 } 130 </script> 131 </body> 132 </html>