滚动条
Posted 雨中伞
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了滚动条相关的知识，希望对你有一定的参考价值。
如果你恰巧需要一个滚动条
可以看看这个
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="../node_modules/jquery/dist/jquery.js"></script> <script> $.fn.hj_addScroll = function (content) { //可配置数据 //滚动速度 var speed = speed || 3; //滚动条样式 scrollBarStyle = { "width": ‘6px‘, "position": ‘absolute‘, "top": ‘0‘, "right": "1px", "border-radius": "3px", "boxShadow": "1px 1px 1px #666", "background": "#c0c0c0", } //盒子 var box = $(this); var boxH = box.height(); var boxOffsetT = box.offset().top; //内容区域 var cont = content; //内容高度 var contH = cont.height(); if (boxH > contH) { return false; } //滚动条 box.append(‘<div class="Rain_scrollBar"></div>‘) var scrollBar = $(‘.Rain_scrollBar‘); //滚动条高度 scrollBar.css(scrollBarStyle) var ratio = boxH / contH; scrollBar.height(boxH * ratio + "px"); var startY = 0; var scrollbarOffsetT = 0; var isDown = false; scrollBar.on(‘mousedown‘, function (e) { isDown = true; //当前位置 scrollbarOffsetT = scrollBar.offset().top; console.log("按下"); //点击时位置 startY = e.pageY; }); $(document).on("mousemove", function (e) { if (!isDown) { return false; } var moveY = e.pageY - startY; moveElem(moveY) console.log("移动"); }); $(document).on("mouseup", function () { isDown = false; console.log("抬起"); }) box.on("mousewheel DOMMouseScroll", function (e) { e.stopPropagation(); var delta = (e.originalEvent.wheelDelta && (e.originalEvent.wheelDelta > 0 ? 1 : -1)) || // chrome & ie (e.originalEvent.detail && (e.originalEvent.detail > 0 ? -1 : 1)); // firefox if (delta > 0) { // 向上滚 console.log("wheelup"); moveElemByScroll(-speed); } else if (delta < 0) { // 向下滚 console.log("wheeldown"); moveElemByScroll(+speed); } }); var moveElemByScroll = function (speed) { var barOffsetTop = scrollBar.offset().top; var postionTop = barOffsetTop + speed - boxOffsetT; if (postionTop < 0) { postionTop = 0 }; if (postionTop > boxH - boxH * ratio) { postionTop = boxH - boxH * ratio } scrollBar.css(‘top‘, postionTop + "px"); cont.css(‘top‘, -(postionTop) / ratio + "px"); } function moveElem(moveY) { var postionTop = scrollbarOffsetT - boxOffsetT + moveY; if (postionTop < 0) { postionTop = 0 } ; if (postionTop > boxH - boxH * ratio) { postionTop = boxH - boxH * ratio } scrollBar.css(‘top‘, postionTop + "px"); cont.css(‘top‘, -postionTop / ratio + "px"); } } $(function ($) { //.hj_scroll 为scrollBar 所在的额盒子 //.div2 为内容区域 $(‘.hj_scroll‘).hj_addScroll($(‘.div2‘)); }) </script> <style> * { margin: 0; padding: 0; } body { font-size: 12px; } .hj_scroll { width: 200px; height: 300px; margin: 100px auto; position: relative; overflow: hidden; border: 1px solid #000; } .div2 { width: 180px; position: absolute; top: 0; left: 5px; } </style> </head> <body> <div class="hj_scroll"> <div class="div2"> 0<br> 0<br> 1<br> 1<br> 1<br> 1<br> 1<br> 1<br> 1<br> 1<br> 1<br> 1<br> 1<br> 1<br> 1<br> 1<br> 1<br> 1<br> 1<br> 1<br> 1<br> 1<br> 1<br> 1<br> 1<br> 1<br> 1<br> 1<br> 1<br> 1<br> 1<br> 1<br> 1<br> 1<br> 1<br> 1<br> 1<br> 1<br> 1<br> 1<br> 1<br> 1<br> 2<br> 2<br> </div> </div> </body> </html>
以上是关于滚动条的主要内容，如果未能解决你的问题，请参考以下文章