html
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>自定义滚动条</title> <link rel="stylesheet" href="./reset.css"> <link rel="stylesheet" href="./style.css"> </head> <body> <!--容器--> <div class="scroll_demo"> <!--标签切换去--> <ul class="scroll_tab clearfix"> <li class="tab_item tab_active">第一篇</li> <li class="tab_item">第二篇</li> <li class="tab_item">第三篇</li> <li class="tab_item">第四篇</li> </ul> <!--内容切换区--> <div class="scroll_wrap"> <!--滚动内容--> <div class="scroll_cont"> <h3 class="anchor">春天来了</h3> <div class="scroll_ol"> <p>春天来了，草长莺飞，万物复苏，到处充满勃勃生机。</p> <p>春天来了，春风给新钻出地面的小草披上了绿衣。春天来了，春精灵给了桃树妹妹一个深情的吻，桃树妹妹羞红了脸儿。春天来了，柳树发芽了，那芽儿欢快地生长着，嫩嫩的、绿绿的，风微微地吹着，小芽儿随着柳枝在风中摇晃，就像一个个跳动的音符，正演奏着春天的赞歌。</p> <p>春天来了，阳光明媚。冻冰了的小河在阳光照耀下懒洋洋地舒展着身子，慢悠悠地哼着小曲，舒坦极了。河里的小鱼自由自在地嬉戏着，不时嘴里还冒出几个泡泡，甭提多开心。小鸭子欢快地在水面上游动，不时呼朋引伴结队而行，甭提多快活。在这暖暖的春日里，小孩子们在田野里、小河边、草地上唱着歌儿，采着野花，享受着美好的春光。</p> <p>春天来了，青蛙“呱呱”地叫着，忙着在田里捉害虫；蜜蜂“嗡嗡”地叫着，忙着在在花丛中采花酿蜜；燕子“唧唧”地叫着，忙着在屋檐下搭窝筑巢；布谷鸟“布谷，布谷”地叫着，忙着催促人们春耕播种……“沙沙沙”春雨滋润着大地，让大地焕然一新。“轰轰隆隆”春雷响彻云霄，敲响了迎春交响曲中的大鼓。</p> <p>春光竟是那么的浪漫，那么的饱满。它把一冬天蕴藏的精神、力量都尽情地释放出来。</p> <p>春天来了，草长莺飞，万物复苏，到处充满勃勃生机。</p> </div> <h3 class="anchor">夏天来了</h3> <div class="scroll_ol"> <p>夏天来了</p> <p>温暖的春天过去了，火热夏天来了。</p> <p>天气变得越来越热了，太阳火辣辣地照在大地上，好像在说：“我很厉害、万物都不是我的对手！哈哈哈！”白云也许也被太阳晒得躲了起来。只有到了傍晚，风吹在身上才会感觉有了一丝丝的凉爽。小鸟躲进了鸟窝里，狗儿躲在阴凉的方吐着舌头，大树也被晒得裂开了皮。树上的知了不住地叫：“夏天真热！知了！知了！”池塘里开满了好看的荷花，有白色的、有粉红色的，在绿色的荷叶衬托下，分处的妖娆。蜻蜓在水面上飞来飞去，有的捉害虫，有的戏嬉打闹，偶尔也会停在荷叶上休息会儿。可爱的小青蛙有的在忙着捉蚊子，还有的则坐在荷叶上呱呱叫。</p> <p>夏天的游泳池可真热闹啊！人们穿着美丽的游泳衣，在游泳池里快乐的的拨着水花，击出一道道浪花，我也参加进去了，让游泳池里的水带走夏天的炎热。</p> <p>夏天的水果也很丰富，有荔枝、西瓜、水蜜桃，还有火龙果。但我最喜欢吃荔枝了。听爸爸妈妈说古时候荔枝是很名贵的，一般的老百姓是吃不到的，而现在荔枝已走入千家万户了，所以夏天我总是会吃到很多很多新鲜甜美的荔枝。</p> <p>夏天虽然很热，但也给我带来了很多快乐，我非常喜欢夏天！</p> </div> <h3 class="anchor">秋天来了</h3> <div class="scroll_ol"> <p>清晨，推开窗子，清风迎面而来，像极了轻纱拂过脸庞。这种凉凉的微风，许久不曾遇见过了。难道？真的，秋天就这样来了！</p> <p>这种感觉，这种味道，不知在那炎热的夏天里，梦寐以求了多少次，如今，秋姑娘她终于来了，我竟然不知道，要对她如何抒发自己的思念之情！</p> <p>微笑着看着湛蓝的天空，这种湛蓝也许只是属于秋天的。广阔的天空中飘着团团白云，如同这个季节里的棉絮。这时，我好像对着天空，轻轻地说：“嘿，好久不见了，我最爱的秋天。”</p> <p>迫不及待的出门，笑着迎着秋风，有着丝丝凉意。对啊，这就是秋天了，秋天来了！只是这秋天，在这里却是如此的短暂，正因这样，她才显得无比珍贵。</p> <p>清风吹过，泛黄的树叶随着风儿漫无边际的舞着，这是秋天里特有的舞者。好想就这样躺着，看着天空，还有偶尔飘着的那几朵白云，心情淡淡的，就如那秋风，无波无澜，好喜欢这种淡淡的感觉。让那飘零的树叶，尽情舞吧，舞累了就落在我的脸上吧！黛玉爱恋落红，扶锄葬花，我却不会埋葬这些叶子。因为，落红不是无情物，化作春泥更护花，这样它们的生命才会得到延续，它们才会成为永恒！</p> <p>秋天来了，好笑的是，自己真的好激动，好想对着大街上的人们说：“嘿，你知道么，秋天来了？”</p> <p>秋天来了，无声无息的！顿时整个世界也开始变得安静了。不再燥热，人也变的恬静了许多；鸟儿、雀儿也是喜欢秋姑娘的，见她来了，纷纷赞赏着她的美貌，却独独不敢喧哗，怕吵了她。</p> <p>此时，田间地头的植物，庄稼是不是也披上了新的衣裳？它们是不是也在迎着柔软的秋风，谈论着自己的心事？瓜果蔬菜是不是也热闹洋洋的，准备着以百米冲刺的速度跑进市场、跑进仓库？</p> <p>秋天来了，你知道了么？若你也喜欢秋天，赶紧走出房门，去感受那柔风的惬意，阳光的温柔和白云的懒散吧。或者，你也可以是坐在门前的竹椅上，泡上一壶淡淡的茶，笑看蓝天白云，落红瘦绿！</p> <p>秋天来了，带来了淡淡的味道，淡淡的静谧，淡淡的诗意！这淡淡的感觉，冲淡了浮华、烦躁，它能让这颗曾经狂躁的心静下来，淡然的享受这美好的世界，五彩的生命。这淡淡的感觉，让生命在这个季节里沉淀，人生意义在这个季节里升华！人生就该这样，淡淡的就好！</p> </div> <h3 class="anchor">冬天来了</h3> <div class="scroll_ol"> <p>秋就这样静静的走了，冬天悄悄的来了。一阵寒风吹过，树叶纷纷落下，不禁打了个哆嗦。冬天的脚步近了，冬天给人坚强，冬天似乎在诉说着，对生命的一种考验，对生命的一种进取，对生命的一种享受。冬天的天空很高，冬天的风儿很冷。冬天的云彩是青色的，冬天的松树四季常青。小虫子在大树底下静静地躺着，鸟儿变得安静许多。</p> <p>冬天骨子里就含蓄，不事张扬。它走过了一路的芬芳、火热与喧嚣，终于以谢幕的姿态淡定下来了。如同一位沧桑老人，流金岁月历练出来一种刚毅与深沉，坦然面对曾经的枯荣兴衰，承受着一切的喜怒哀乐，在淡定中回味童年的梦幻，反思青年的激情，盘点中年的得失。它又静若处女，把几多复杂的情感深深埋在心底，隐秘着多情与向往，按捺住所有的冲动与宣泄，在平静中期待春缘的喜乐，憧憬播种的自豪，遐思人生的美好。冬少了一些浮华，多了一份内敛；少了一些狂热，多了一份凝重，风清气正，厚积薄发。</p> <p>冬天，没有夏天的炎热，却有着一种自然的冷静和坚韧。冬天，没有秋天的收获和丰盛，却有着蓄势待发的内敛和睿智。冬天，就是一幅黑白素描。线条简单，却蕴含着深奥的生命真谛。 冬天像一首优雅的古典音乐，在静静的诉说，犹如那湖面泛起的点点阳光，又似枝头挂满的音符。 在静静的流淌中，沉淀出心底那份沉静和纯洁。</p> <p>冬天不需要颂扬，也不怕打击，因为冬已经从容而慷慨地呈现出了自我。万物飘零，一派肃杀，那是本性的直面；西风飕飕，雪花飘飘，那是个性的展示，任凭说长道短，众说纷纭。有人说，冬的面孔是冷峻的，岂不知那是对世间所有作秀的不屑；还有人说，冬的神态是凄美的，因为包容太多，沉淀了无尽的甘苦。所以，我想说，冬是一个极富特色的季节，一种独特的意境。真的用心去感受这种意境，也许会摄取到一种力量。</p> <p>冬天来了，春天还会远吗？大家一起期待与渴望，一股热流遍全身。如果心中有希望，冬天也会变成温暖的海洋。</p> <p>冬天来了，已经走过的春夏秋变成了凝固的风景画，凝聚成了刻在心海里永远的记忆和珍藏。</p> <p>冬天让我明白，只有经历了与严寒奋勇拼搏，就若那迎风傲雪怒放着的梅花一样威武不屈，才会让心灵不再迷茫，让梦想不再飘渺。</p> <p>走进冬天，走进寒冷，也走进希望，严寒不可怕，暴风雪也不可怕，只要我们心中拥有美好的理想，只要我们敢于拼搏，每个人都会走向成功的彼岸。</p> <p>风在吹，云在走，水在流，瞬间与永恒。</p> <p>冬天来了。</p> </div> </div> <!--滚动条--> <div class="scroll_bar"> <!--滑块--> <div class="scroll_slider"> </div> </div> </div> </div> </body> <script type="text/javascript" src="jquery.js"></script> <script src="scroll.js"></script> <script type="text/javascript"> var scroll = new Scroll.CusScrollBar({ contSelector : ".scroll_cont", // 滑动内容区选择器(必须) barSelector : ".scroll_bar", // 滑动条选择器（必须） sliderSelector : ".scroll_slider", // 滑动快选择器 tabItemSelector: ".tab_item", // 标签选择器（必须） tabActiveClass : "tab_active", // 选中标签样式 anchorSelector : ".anchor" // 苗点选择器（必须） }); </script> </html>
css
body{ background: #ccc; } .scroll_demo{ background: #fff; width: 540px; border:1px solid #e5e5e5; margin: 40px auto; box-shadow: 0px 5px 10px 2px rgba(0,0,0,0.5); } .scroll_tab{ height: 34px; border-bottom: 1px solid #e5e5e5; color: #666; background:#f8f8f8; } .scroll_tab .tab_item{ float: left; font: 14px/34px "Microsoft Yahei"; height: 100%; text-align: center; padding: 0 20px; border-right: 1px solid #e5e5e5; cursor:pointer; } .scroll_tab .tab_active{ color: #00be3c; border-top: 2px solid #00be3c; background:#fff; margin: -1px 0; } /* 滚动内容区 */ .scroll_wrap{ position: relative; width: 100%; height: 300px; } .scroll_wrap .scroll_cont{ height: 100%; overflow: hidden; padding: 0 15px; } .scroll_wrap .scroll_cont h3{ font: 16px/3 "Microsoft Yahei"; text-align: center; } .scroll_wrap .scroll_cont p{ font-size: 14px; line-height: 20px; text-indent: 2em; margin-bottom: 10px; } /* 滚条 */ .scroll_wrap .scroll_bar{ position: absolute; top: 0; right: 0; height: 100%; width: 10px; background-color: #eaeaea; } .scroll_wrap .scroll_slider{ position: absolute; left: 1px; top: 0; width: 8px; height: 30px; background:#333; cursor: pointer; }
scroll.js
var Scroll = {}; (function(win,doc,$){ function CusScrollBar(options) { // 初始化 this._init(options); } // 在原型上添加方法 $.extend(CusScrollBar.prototype,{ _init : function(options) { var self = this; self.options = { contSelector: "", // 滑动内容区选择器 barSelector: "", // 滑动条选择器 sliderSelector: "", // 滑动块选择器 tabItemSelector: "",// 标签选择器 tabActiveClass: "" ,// 选中的标签样式 anchorSelector: "", // 苗点选择器 wheelStep: 15 // 滚动步幅 }; $.extend(true,self.options,options || {}); // Dom选择函数 self._initDomEvent(); // 绑定滑块点击拖动事件 self._initSliderDragEvent(); // 绑定滚轮事件 self._bandMouseWheel(); // 监听内容滚动，同步滑块移动 self._bandContScroll(); // 点击切换标签 self._initTabEvent(); return self; }, /* * 初始化DOM引用 * @method _initDomEvent * @return {CusScrollBar} */ _initDomEvent : function(){ var opts = this.options; // 滑动内容区对象，必须填 this.$cont = $(opts.contSelector); // 滑动条滑块对象，必须填 this.$slider = $(opts.sliderSelector); // 滑动条对象 this.$bar = opts.barSelector ? $(opts.barSelector) : this.$slider.parent(); // 文档对象 this.$doc = $(doc); // 标签对象 this.$tabItem = $(opts.tabItemSelector); // 苗点对象 this.$anchor = $(opts.anchorSelector); }, /* * 初始化滑动块滑动功能 * @return {[object]} [this] */ _initSliderDragEvent: function(){ var self = this; var slider = self.$slider; var cont = self.$cont; var doc = self.$doc, dragStartPagePosition, dragStartScrollPosition, dragContBarRate; function mousemoveHandler(e){ if(dragStartPagePosition == null){ return; } self.scrollContTo(dragStartScrollPosition + (e.pageY - dragStartPagePosition)*dragContBarRate); } slider.on("mousedown", function (event){ event.preventDefault(); dragStartPagePosition = event.pageY; dragStartScrollPosition = cont[0].scrollTop; dragContBarRate = self.getMaxScrollPosition()/self.getMaxSliderPosition(); doc.on("mousemove.scroll", function(event){ event.preventDefault(); mousemoveHandler(event); }).on("mouseup.scroll", function(event){ event.preventDefault(); doc.off(".scroll"); }); }); }, // 监听内容滚动事件，同步滑块位置 _bandContScroll : function() { var self = this; self.$cont.on("scroll", function(e) { e.preventDefault(); self.$slider.css( 'top', self.getSliderPosition() + 'px'); }); }, // 绑定鼠标滚轮事件 _bandMouseWheel : function() { var self = this; self.$cont.on("mousewheel DOMMouseScroll", function(e) { e.preventDefault(); var oEv = e.originalEvent; var wheelRange = oEv.wheelDelta ? -oEv.wheelDelta/120 : (oEv.detail || 0)/3; self.scrollContTo(self.$cont[0].scrollTop + wheelRange * self.options.wheelStep); }); return self; }, /* *初始化标签切换功能 * @return {[object]} [this] */ _initTabEvent : function() { var self = this; self.$tabItem.on("click", function (e) { e.preventDefault(); var index = $(this).index(); self.changeTabSelect(index); // 切换标签后同步内容 self.scrollContTo(self.$cont[0].scrollTop + self.getAnchorPosition(index)); }); }, // 切换标签 changeTabSelect : function (index) { var self = this; var active = self.options.tabActiveClass; self.$tabItem.eq(index).addClass(active).siblings().removeClass(active); return self; }, // 获取每个苗点位置信息的数据 getAllAnchorPosition : function () { var self = this; var allAnchor = []; for(var i = 0; i < self.$anchor.length; i++ ) { allAnchor.push(self.$cont[0].scrollTop + self.getAnchorPosition(i)); } return allAnchor; }, // 获取指定苗点到容器上边界的位置 getAnchorPosition : function (index) { var self = this; return self.$anchor.eq(index).position().top; }, // 获取滑块位置 getSliderPosition : function() { var self = this; return self.$cont[0].scrollTop/(self.getMaxScrollPosition()/self.getMaxSliderPosition()); }, // 文档可滚动最大距离 getMaxScrollPosition : function() { var self = this; return Math.max(self.$cont.height(),self.$cont[0].scrollHeight) - self.$cont.height(); }, // 滑块可移动最大距离 getMaxSliderPosition : function() { var self = this; return self.$bar.height() - self.$slider.height(); }, // 滚动文档内容 scrollContTo : function(positionVal) { var self = this; var anchorArr = self.getAllAnchorPosition(); function getIndex(positionVal) { for (var i = anchorArr.length; i >= 0; i--) { if (positionVal >= anchorArr[i]) return i; } } // 苗点数与标签数一样的话 if(self.$tabItem.length == anchorArr.length) self.changeTabSelect(getIndex(positionVal)); self.$cont.scrollTop(positionVal); } }); Scroll.CusScrollBar = CusScrollBar; })(window,document,jQuery)