模拟滚动条

模拟滚动条，文字内容跟随滚动条滑动的反方向同比例移动

  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                 width: 350px;
 13                 border: 1px solid red;
 14             }
 15             .clear:after{
 16                 clear: both;
 17                 display: block;
 18                 content: '\20';
 19             }
 20             .content{
 21                 width: 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                 width: 49px;
 39                 height: 500px;
 40                 background: #abcdef;
 41                 float: right;
 42                 position: relative;
 43                 border-left: 1px solid #000;
 44             }
 45             .drag{
 46                 width: 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>

 

posted @ 2017-04-14 20:42  无花即无果  阅读(171)  评论(0)  编辑  收藏  举报