tofacebook.com -专业IT技术社区 js自定义滚动样式 Web程序 - tofacebook.com-专业IT技术社区
140°

js自定义滚动样式 Web程序

标签:scroll   分享   SM   ali   越界   content   off   大小   自动   

技术分享图片

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4 
  5     <style type=‘text/css‘>
  6 
  7         html{
  8                 overflow: hidden;
  9             }
 10 
 11 #scroll{
 12             width: 800px;
 13             margin: 100px auto;
 14             padding: 10px 30px 10px 10px;
 15             border: 1px solid #ccc;
 16             border - radius: 4px;
 17             height: 500px;
 18             overflow: hidden;
 19             position: relative;
 20         }
 21 #scroll-bar{
 22         position:absolute;
 23             width:10px;
 24             left: 0px;
 25             top: 0px;
 26             border-left: 1px solid #ccc;
 27             border-radius: 4px;
 28         }
 29 #bar{
 30             width:10px;
 31             border-top: 1px solid #ccc;
 32             border-bottom: 1px solid #ccc;
 33             border-radius: 4px;
 34             background-color: #ccc;
 35         }
 36     </style>
 37 </head>
 38 <body>
 39     <div id = ‘scroll‘>
 40         <div id=‘content‘>
 41             <p>
 42                 <p style="margin-top:0pt; margin-bottom:0pt; text-align:justify; widows:
 43 0; orphans:0; font-size:12pt">
 44                 <span style="font-family:‘‘微软雅黑‘‘"> 
 45                  我们不可以借口发展经济而污染环境。 
 46                 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。
 47                  我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 
 48                  我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 
 49                  我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 
 50                  我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 
 51                  我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 
 52                  我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 
 53                  我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。
 54                  我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。
 55                  我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。
 56                  我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 
 57                  我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。
 58                  我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。
 59                  我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 
 60                  我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 
 61                  我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。
 62                  我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 
 63                  我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 
 64                  我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 
 65                  我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 
 66                  我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 
 67                  我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 
 68                  我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 
 69                  我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 
 70                  我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 
 71                  我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 
 72                  我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 
 73                  我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。
 74                  我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 
 75                  我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 
 76                  我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 
 77                  我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 
 78                  我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 
 79                  我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。
 80                  我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 
 81                  我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 
 82                  我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 
 83                  我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。
 84                  我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。
 85                  我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 
 86                  我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。
 87                  我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 
 88                  我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 
 89                  我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 
 90                  我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 
 91                  我们不可以借口发展经济而污染环境。
 92                 (on the pretence of)
 93                 </span>
 94                 </p>
 95                 <p style="margin-top:0pt; margin-bottom:0pt; text-align:justify; widows:0; orphans:0; font-size:12pt"><span style="font-family:‘‘微软雅黑‘‘">&#xa0;</span></p>
 96             </p>
 97         </div>
 98         <div id=‘scroll-bar‘>
 99               <div id = ‘bar‘></div>
100         </div>
101     </div>
102 
103           <script type = ‘text/javascript‘>
104             // 原理就是 框体有大小,内容无大小,框体超出部分隐藏 内容自动撑开, 根据比例获得滑块和滑框来进行滑动,滑块到顶部的距离,再换算成 内容-margin-top
105             window.onload = function(){
106                 var scroll = document.getElementById(scroll);
107                 var content = document.getElementById(content);
108                 var scrollBar = document.getElementById(scroll-bar);
109                 var bar = document.getElementById(bar);
110                 var scrollH = scroll.offsetHeight;
111                 var contentH = content.offsetHeight;
112                 // 滚动条框 和框体的高度是一样的
113                 scrollBar.style.height = scrollH + px;
114                 // 开始我想用right的,但是ie7 不兼容  
115                 scrollBar.style.left = scroll.offsetWidth - 12 + px;
116                 // 滚动条的高度等于 框体高*(框体的高度比上内容的高度) (小学数学);
117                 bar.style.height = scrollH * (scrollH / contentH) + px;
118                 var isMove = false;//是否开启滑动
119                 var oldY = 0;//滑动之前的老位置 初始化为0
120                 bar.onmousedown = function(event){
121                     var event = event || window.event;
122                     oldY = event.clientY;
123                     isMove = true;
124                             return false;
125                 }       
126             document.onmouseup  = function(){
127                 isMove = false;
128                 return false;
129             }
130             document.onmousemove = function(event){
131                 var event = event || window.event;
132                 if (isMove) {
133                     // 滚动条变化的值 dirY
134                     var dirY = event.clientY - oldY;
135                     goOn(dirY);
136                     oldY = event.clientY;
137                 }
138             }
139     // 滚动事件
140     scroll.onmousewheel = function(event)
141     {
142         var event  = event || window.event;
143         // event.wheelDelta 每次滚动都是+-120  这里设置一个系数 120 太大了更适合浏览器的滚动
144         goOn(-event.wheelDelta * 0.2);
145         return false;
146     }
147     function goOn(dirY)
148     {
149         // 滚动条滚动
150         bar.style.marginTop = bar.offsetTop + dirY + px;
151         // 越界处理
152         if (bar.offsetTop < 0)
153         {
154             bar.style.marginTop = 0px;
155         }
156         if ((bar.offsetTop + bar.offsetHeight) > scrollBar.offsetHeight)
157         {
158             bar.style.marginTop = scrollBar.offsetHeight - bar.offsetHeight + px;
159         }
160         // 内容框的margin-top
161         content.style.marginTop = -bar.offsetTop / ((scrollH - 10) / contentH) + px;
162     }
163 }
164     </script>
165 </body>
166 
167 
168 </html>

 

js自定义滚动样式

标签:scroll   分享   SM   ali   越界   content   off   大小   自动   

原文地址:https://www.cnblogs.com/weiyf/p/8568229.html


本文由百家号/熊掌号作者上传并发布,百家号仅提供信息发布平台。文章仅代表作者个人观点,不代表百度立场。

已有 0 条评论

    我有话说: