JavaScript自定義滾動條

時間  2019-11-12
標籤 javascript 自定義 滾動條 欄目 JavaScript 简体版
原文   原文鏈接

原生JavaScript自定義滾動條

版權全部，如若轉載請註明出處並附上本文連接 http://www.cnblogs.com/Pengxm-liveShare/p/5953810.htmlhtml

因爲項目需求須要用到滾動條， 可是瀏覽器自帶的太醜， 並且每一個瀏覽器顯示的都不一樣， 因此本身編寫了一個自定義的滾動條。 （因爲是菜鳥， 寫的比較亂， 你們僅供參考就好， 能提提意見改進下就更好了！）web

話很少說先看下樣式：瀏覽器

主要功能：

  1. 支持滾動條自定義樣式（顏色， 大小）
  2. 支持鼠標事件（點擊和滑輪滾動）

主要代碼：

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>Document</title>
  6     <style>
  7         * {
  8             padding: 0;
  9             margin: 0;
 10             list-style: none;
 11             border: 0;
 12         }
 13 
 14         .scrollWrap {
 15             margin: 200px auto;
 16             width: 800px;
 17             position: relative;
 18             height: 300px;
 19             border: 1px solid #ccc;
 20             border-radius: 5px;
 21             overflow: hidden
 22         }
 23 
 24         .scrollView, .scrollBar, .scrollBtn {
 25             overflow: hidden;
 26             height: 300px;
 27             position: absolute;
 28             top: 0;
 29             right: 0;
 30             width: 10px;
 31         }
 32 
 33         .scrollView {
 34             left: 0;
 35             width: 100%;
 36             padding: 10px;
 37             height: auto;
 38             box-sizing: border-box;
 39             moz-user-select: -moz-none;
 40             -moz-user-select: none;
 41             -o-user-select: none;
 42             -khtml-user-select: none; /* you could also put this in a class */
 43             -webkit-user-select: none; /* and add the CSS class here instead */
 44             -ms-user-select: none;
 45             user-select: none; /**禁止選中文字*/
 46         }
 47 
 48         .scrollBar {
 49             background-color: lightcoral;
 50             border-radius: 5px;
 51         }
 52 
 53         .scrollBtn {
 54             border-radius: 5px;
 55             background-color: #cc00cc;
 56             z-index: 100;
 57         }
 58     </style>
 59 </head>
 60 <body>
 61 <div class="scrollWrap" id="scrollWrap">
 62     <div class="scrollView" id="scrollView">
 63         <p>哈哈哈哈 李 周 吳 鄭 王 馮 陳 楮 衛 蔣 沈 韓 楊 朱 秦 尤 許 何 呂 施 張 孔 曹 嚴 華 金 魏 陶 姜 樂 於 時 傅 皮 卞 齊</p>
 64         <p>呵呵呵額呵呵 水 竇 章 雲 蘇 潘 葛 奚 範 彭 郎 魯 韋 昌 馬 苗 鳳 花 方 俞 任 袁 柳 酆 鮑 史 唐 伍 餘 元 卜 顧 孟 平</p>
 65 
 66         <p>呵呵呵額呵呵 水 竇 章 雲 蘇 潘 葛 奚 範 彭 郎 魯 韋 昌 馬 苗 鳳 花 方 俞 任 袁 柳 酆 鮑 史 唐 伍 餘 元 卜 顧 孟 平</p>
 67         <p>呵呵呵額呵呵 水 竇 章 雲 蘇 潘 葛 奚 範 彭 郎 魯 韋 昌 馬 苗 鳳 花 方 俞 任 袁 柳 酆 鮑 史 唐 伍 餘 元 卜 顧 孟 平</p>
 68         <p>呵呵呵額呵呵 水 竇 章 雲 蘇 潘 葛 奚 範 彭 郎 魯 韋 昌 馬 苗 鳳 花 方 俞 任 袁 柳 酆 鮑 史 唐 伍 餘 元 卜 顧 孟 平</p>
 69 
 70         <p>呵呵呵額呵呵 水 竇 章 雲 蘇 潘 葛 奚 範 彭 郎 魯 韋 昌 馬 苗 鳳 花 方 俞 任 袁 柳 酆 鮑 史 唐 伍 餘 元 卜 顧 孟 平</p>
 71         <p>呵呵呵額呵呵 水 竇 章 雲 蘇 潘 葛 奚 範 彭 郎 魯 韋 昌 馬 苗 鳳 花 方 俞 任 袁 柳 酆 鮑 史 唐 伍 餘 元 卜 顧 孟 平</p>
 72         <p>呵呵呵額呵呵 水 竇 章 雲 蘇 潘 葛 奚 範 彭 郎 魯 韋 昌 馬 苗 鳳 花 方 俞 任 袁 柳 酆 鮑 史 唐 伍 餘 元 卜 顧 孟 平</p>
 73 
 74         <p>呵呵呵額呵呵 水 竇 章 雲 蘇 潘 葛 奚 範 彭 郎 魯 韋 昌 馬 苗 鳳 花 方 俞 任 袁 柳 酆 鮑 史 唐 伍 餘 元 卜 顧 孟 平</p>
 75         <p>呵呵呵額呵呵 水 竇 章 雲 蘇 潘 葛 奚 範 彭 郎 魯 韋 昌 馬 苗 鳳 花 方 俞 任 袁 柳 酆 鮑 史 唐 伍 餘 元 卜 顧 孟 平</p>
 76         <p>呵呵呵額呵呵 水 竇 章 雲 蘇 潘 葛 奚 範 彭 郎 魯 韋 昌 馬 苗 鳳 花 方 俞 任 袁 柳 酆 鮑 史 唐 伍 餘 元 卜 顧 孟 平</p>
 77 
 78         <p>呵呵呵額呵呵 水 竇 章 雲 蘇 潘 葛 奚 範 彭 郎 魯 韋 昌 馬 苗 鳳 花 方 俞 任 袁 柳 酆 鮑 史 唐 伍 餘 元 卜 顧 孟 平</p>
 79         <p>呵呵呵額呵呵 水 竇 章 雲 蘇 潘 葛 奚 範 彭 郎 魯 韋 昌 馬 苗 鳳 花 方 俞 任 袁 柳 酆 鮑 史 唐 伍 餘 元 卜 顧 孟 平</p>
 80         <p>呵呵呵額呵呵 水 竇 章 雲 蘇 潘 葛 奚 範 彭 郎 魯 韋 昌 馬 苗 鳳 花 方 俞 任 袁 柳 酆 鮑 史 唐 伍 餘 元 卜 顧 孟 平</p>
 81 
 82         <p>呵呵呵額呵呵 水 竇 章 雲 蘇 潘 葛 奚 範 彭 郎 魯 韋 昌 馬 苗 鳳 花 方 俞 任 袁 柳 酆 鮑 史 唐 伍 餘 元 卜 顧 孟 平</p>
 83         <p>呵呵呵額呵呵 水 竇 章 雲 蘇 潘 葛 奚 範 彭 郎 魯 韋 昌 馬 苗 鳳 花 方 俞 任 袁 柳 酆 鮑 史 唐 伍 餘 元 卜 顧 孟 平</p>
 84 
 85         <p>xxx額呵呵 水 竇 章 雲 蘇 潘 葛 奚 範 彭 郎 魯 韋 昌 馬 苗 鳳 花 方 俞 任 袁 柳 酆 鮑 史 唐 伍 餘 元 卜 顧 孟 平</p>
 86     </div>
 87     <div class="scrollBar" id="scrollBar">
 88         <span class="scrollBtn" id="scrollBtn"></span>
 89     </div>
 90 </div>
 91 </body>
 92 </html>
 93 <script>
 94     (function () {
 95 
 96         function Scroll(scrollWrap, scrollView, scrollBar, scrollBtn, scrollList) {
 97             this.scrollWrap = document.getElementById(scrollWrap);
 98             this.scrollView = document.getElementById(scrollView);
 99             this.scrollBar = document.getElementById(scrollBar);
100             this.scrollBtn = document.getElementById(scrollBtn);
101             this.scrollList = document.getElementById(scrollList);
102         }
103 
104         Scroll.prototype.setScroll = function () {
105             var _this = this,
106                     scrollWrapHeight = _this.scrollWrap.offsetHeight,                             // 獲取父級容器高度值；
107                     scrollViewH = _this.scrollView.offsetHeight,                                // 獲取滾動頁面的高度
108                     scrollBarH = _this.scrollBar.offsetHeight,                                     // 獲取滾動槽的高度
109                     wrapTopH = _this.scrollWrap.offsetTop,                                         // 獲取body容器到父級容器的高度值；
110                     scrollBtnH = scrollWrapHeight * scrollBarH / scrollViewH;
111             // 給滑動按鈕設置最小高度
112             if (scrollBtnH <= 40) {
113                 scrollBtnH = 40;
114             } else if (scrollBtnH >= scrollBarH) {
115                 scrollBtnH = 0;
116                 _this.scrollBar.style.display = 'none';
117                 _this.scrollView.style.paddingRight = 0;
118             }
119             // 動態設置滑動按鈕的高度
120             _this.scrollBtn.style.height = scrollBtnH + 'px';
121             //    console.log('滑動按鈕高度 ' + scrollBtnH + 'px');
122             // 鼠標點擊事件
123             var defaults = {
124                 addEvent: function (event) {
125                     var event = event || window.event;
126                     var touchPageY = event.pageY - wrapTopH;
127                     if (touchPageY < scrollBtnH / 2) {
128                         touchPageY = scrollBtnH / 2;
129                     } else if (touchPageY > (scrollBarH - scrollBtnH / 2)) {
130                         touchPageY = (scrollBarH - scrollBtnH / 2);
131                     }
132                     if (scrollBtnH == 0) {
133                         touchPageY = 0;
134                     }
135 
136                     //保持滑塊中心滾動 touchPageY - scrollBtnH/2
137                     _this.scrollBtn.style.top = touchPageY - scrollBtnH / 2 + 'px';
138                     _this.scrollView.style.top = -(touchPageY - scrollBtnH / 2) * (scrollViewH - scrollBarH) / (scrollBarH - scrollBtnH) + 'px';
139                 },
140                 scrollFunc: function (event) {
141                     var scrollTop = _this.scrollBtn.offsetTop;
142                     var btnTop = 0;  // 滑塊top值
143                     if (event.wheelDelta) {//IE/Opera/Chrome
144                         if (event.wheelDelta > 0) {
145                             btnTop = scrollTop - 50;  // 設定每次滾輪移動 50px
146                             if (btnTop < 0) {
147                                 btnTop = 0;
148                             }
149                         } else {
150                             btnTop = scrollTop + 50;
151                             if (btnTop > (scrollBarH - scrollBtnH)) {
152                                 btnTop = (scrollBarH - scrollBtnH);
153                             }
154                         }
155                     } else if (event.detail) {//Firefox
156                         if (event.detail > 0) {
157                             btnTop = scrollTop + 50;
158                             if (btnTop > (scrollBarH - scrollBtnH)) {
159                                 btnTop = (scrollBarH - scrollBtnH);
160                             }
161 
162                         } else {
163                             btnTop = scrollTop - 50;
164                             if (btnTop < 0) {
165                                 btnTop = 0;
166                             }
167                         }
168                     }
169                     _this.scrollBtn.style.top = btnTop + 'px';
170                     _this.scrollView.style.top = -btnTop * (scrollViewH - scrollBarH) / (scrollBarH - scrollBtnH) + 'px';
171                 }
172             };
173             // 監聽鼠標點擊
174             _this.scrollBtn.onmousedown = function () {
175                 document.onmousemove = function (event) {
176                     defaults.addEvent(event);
177                 }
178             };
179             document.onmouseup = function () {
180                 document.onmousemove = null;
181             };
182             _this.scrollBar.onclick = function (event) {
183                 defaults.addEvent(event);
184             };
185 
186             // 滾輪事件
187             if (document.addEventListener) {
188                 document.addEventListener('DOMMouseScroll', defaults.scrollFunc, false);
189             }//W3C
190             _this.scrollList.onmousewheel = defaults.scrollFunc;//IE/Opera/Chrome/Safari
191 
192         };
193 
194 
195         document.addEventListener("DOMContentLoaded", function () {
196             var scroller = new Scroll('scrollWrap', 'scrollView', 'scrollBar', 'scrollBtn', 'scrollView');
197             scroller.setScroll();
198         });
199     })();
200 
201 </script>
View Code
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程