[{"data":1,"prerenderedAt":67},["ShallowReactive",2],{"article-25":3},{"code":4,"msg":5,"data":6,"count":14},200,"查询成功",{"id":7,"title":8,"keywords":9,"description":10,"category_id":11,"content":12,"body_html":13,"thumb_up":14,"clicks":15,"sort":14,"remark":16,"status":17,"is_open":17,"is_deleted":14,"is_top":14,"is_recommend":14,"create_time":18,"update_time":19,"image_id":20,"url":13,"member_id":14,"cate_name":21,"prev":22,"next":25,"tags":28,"words":38,"read_time":39,"comments":14,"cover":40,"relevant":41},25,"JavaScript自定义滚动条","javaScript,web,滚动条","由于公司项目需要，火狐浏览器无法纯CSS修改滚动条的样式，可借助javaScript实现滚动条样式修改。",2,"##### 一、主要HTML代码：\n\n![](https:\u002F\u002Ftp.myong.top\u002Fstorage\u002Fckeditor\u002F20190117\u002F6e6748c001ae29cc138f842c4a213883.png)\n##### 二、主要的CSS样式\n![](https:\u002F\u002Ftp.myong.top\u002Fstorage\u002Fckeditor\u002F20190117\u002F51546ad4377654f23800640fb21d2222.png)\n\n##### 三、面向对象的形式书写javaScript\n\n###### 1、创建滚动条方法：\n\n```javaScript\nfunction createScroll() {\n    this.doc = document;\n    this._wheelData = -1;\n    this.init.apply(this, arguments);\n }\n```\n###### 2、初始化滚动条：\n\n```javaScript\ninit: function(mainBox, contentBox, className) {\n      var mainBox    = this.doc.getElementById(mainBox);\n      var contentBox = this.doc.getElementById(contentBox);\n      var scrollDiv  = this._createScroll(mainBox, className);\n      this._resizeScorll(scrollDiv, mainBox, contentBox);\n      this._tragScroll(scrollDiv, mainBox, contentBox);\n      this._wheelChange(scrollDiv, mainBox, contentBox);\n      this._clickScroll(scrollDiv, mainBox, contentBox);\n  },\n```\n###### 3、创建滚动条基本元素：\n\n```javaScript\n_createScroll: function(mainBox, className) {\n    var _scrollBox = this.doc.createElement('div')\n    var _scroll    = this.doc.createElement('div');\n    var span       = this.doc.createElement('span');\n    _scrollBox.appendChild(_scroll);\n    _scrollBox.className = 'scroll';\n    _scroll.appendChild(span);\n    _scroll.className = className;\n    mainBox.appendChild(_scrollBox);\n    return _scroll;\n },\n```\n###### 4、页面加载调整滚动条：\n\n```javaScript\n_resizeScorll: function(element, mainBox, contentBox) {\n   var eleNode        = element.parentNode;\n   var conHeight      = contentBox.offsetHeight;\n   var _width         = mainBox.clientWidth;\n   var _height        = mainBox.clientHeight;\n   var _scrollWidth   = element.offsetWidth;\n   var _left          = _width - _scrollWidth;\n   eleNode.style.width      = _scrollWidth + \"px\";\n   eleNode.style.height     = _height + \"px\";\n   eleNode.style.left       = _left + \"px\";\n   eleNode.style.position   = \"absolute\";\n   eleNode.style.background = \"#ccc\";\n   contentBox.style.width = (mainBox.offsetWidth - _scrollWidth + 10) + \"px\";\n   var _scrollHeight = parseInt(_height * (_height \u002F conHeight));\n   if (_scrollHeight >= mainBox.clientHeight) {\n       element.parentNode.style.display = \"none\";\n   }\n   element.style.height = _scrollHeight + \"px\";\n},\n```\n###### 5、定义鼠标拖动滚动条方法：\n\n```javaScript\n_tragScroll: function(element, mainBox, contentBox) {\n           var mainHeight = mainBox.clientHeight;\n           element.onmousedown = function(event) {\n           var _this      = this;\n           var _scrollTop = element.offsetTop;\n           var e          = event || window.event;\n           var top        = e.clientY;\n          \u002F\u002Fthis.onmousemove=scrollGo;\n          document.onmousemove = scrollGo;\n          document.onmouseup  = function(event) {\n             this.onmousemove = null;\n          }\n     function scrollGo(event) {\n          var e    = event || window.event;\n          var _top = e.clientY;\n          var _t   = _top - top + _scrollTop;\n          if (_t > (mainHeight - element.offsetHeight)) {\n               _t = mainHeight - element.offsetHeight;\n          }\n          if (_t \u003C= 0) {\n              _t = 0;\n          }\n          element.style.top    = _t + \"px\";\n            contentBox.style.top = -_t * (contentBox.offsetHeight \u002F mainBox.offsetHeight) + \"px\";\n            this._wheelData = _t;\n         }\n    }\n    element.onmouseover = function() {\n        this.style.background = \"#1b4f63\";\n    }\n    element.onmouseout = function() {\n        this.style.background = \"#2c8cab\";\n    }\n},\n```\n###### 6、定义鼠标滚轮滚动，滚动条滚动：\n\n```javaScript\n_wheelChange: function(element, mainBox, contentBox) {\n       var node = typeof mainBox == \"string\" ? $(mainBox) : mainBox;\n       var flag = 0,\n       rate = 0,\n       wheelFlag = 0;\n       if (node) {\n            this._mouseWheel(node, function(data) {\n            wheelFlag += data;\n            if (this._wheelData >= 0) {\n                 flag              = this._wheelData;\n                 element.style.top = flag + \"px\";\n                 wheelFlag         = this._wheelData * 12;\n                 this._wheelData        = -1;\n            } else {\n                 flag = wheelFlag \u002F 12;\n            }\n            if (flag \u003C= 0) {\n                 flag      = 0;\n                 wheelFlag = 0;\n            }\n            if (flag >= (mainBox.offsetHeight - element.offsetHeight)) {\n                flag      = (mainBox.clientHeight - element.offsetHeight);\n                wheelFlag = (mainBox.clientHeight - element.offsetHeight) * 12;\n            }\n            element.style.top    = flag+ \"px\";\n            contentBox.style.top = -flag * (contentBox.offsetHeight \u002F mainBox.offsetHeight) + \"px\";         \n        });\n    }\n},\n```\n###### 7、定义鼠标点击滚动条方法：\n\n```javaScript\n_clickScroll: function(element, mainBox, contentBox) {\n           var eleNode = element.parentNode;\n           eleNode.onclick = function(event) {\n           var e = event || window.event;\n           var t = e.target || e.srcElement;\n           var sTop = document.documentElement.scrollTop > 0 ? document.documentElement.scrollTop : document.body.scrollTop;\n           var top  = mainBox.offsetTop;\n           var _top = e.clientY + sTop - top - element.offsetHeight \u002F 2;\n           if (_top \u003C= 0) {\n               _top = 0;\n          }\n          if (_top >= (mainBox.clientHeight - element.offsetHeight)) {\n             _top = mainBox.clientHeight - element.offsetHeight;\n         }\n         if (t != element) {\n            element.style.top = _top + \"px\";\n            contentBox.style.top = -_top * (contentBox.offsetHeight \u002F mainBox.offsetHeight) + \"px\";\n            this._wheelData = _top;\n        }\n    }\n},\n```\n###### 8、方法调用\n\n```javaScript\n new createScroll('box', 'content', 'scrollDiv');\n```",null,0,502,"",1,"2019-01-17 22:59:26","2026-04-19 15:15:22",127,"PHP",{"id":23,"title":24},24,"利用three.js在网页嵌入dae类型的3d模型",{"id":26,"title":27},26,"PHP设计模式之基础设计模式",[29,32,35],{"id":30,"name":31},42,"前端",{"id":33,"name":34},43,"Javascript",{"id":36,"name":37},32,"web",3209,8,"https:\u002F\u002Ftp.myong.top\u002Fstorage\u002Farticle\u002Fde\u002F36593248f37397d88a6a0d873ebaad.jpg",[42,47,52,57,62],{"id":43,"title":44,"create_time":45,"description":46},93,"PHP执行Python脚本解压，压缩文件夹操作","2020-08-06 14:59:05","PHP是有解压缩类文件的，但在实际项目中，用户方使用Python脚本压缩，很容易出现中文解压乱码，导致文件内容丢失的情况，本文主要介绍PHP执行Python脚本解压缩出现的问题以及解决方法",{"id":48,"title":49,"create_time":50,"description":51},92,"PHP对图片的处理","2020-07-30 15:53:38","图片处理函数功能：缩放、剪切、相框、水印、锐化、旋转、翻转、透明度、反色处理并保存历史记录的思路：当有图片有改动时自动生成一张新图片",{"id":53,"title":54,"create_time":55,"description":56},96,"PHP中字符串跟0做比较永远是true","2021-02-04 16:16:27","最近在项目中做数据对比的功能，发现一个特殊的情况，0跟任何字符串做比较永远返回true，特意了解了一下。",{"id":58,"title":59,"create_time":60,"description":61},13,"Win系统下配置PHP链接Oracle","2019-01-17 22:23:36","该文章内容主要介绍window系统下，php连接oracle的配置。",{"id":63,"title":64,"create_time":65,"description":66},103,"面向对象三大特性五大原则 + 低耦合高内聚[转载]","2021-10-31 23:18:58","面向对象的三大特性是\"封装、\"多态\"、\"继承\"，五大原则是\"单一职责原则\"、\"开放封闭原则\"、\"里氏替换原则\"、\"依赖倒置原则\"、\"接口分离原则\"。",1783431669610]