JavaScript自定义浏览器滚动条兼容工业工程,火狐和铬

今天为大家分享一下我自己制作的浏览器滚动条，我们知道用钢性铸铁来自定义滚动条也是挺好的方式，css虽然能够改变铬浏览器的滚动条样式可以自定义，css也能够改变工业管理学(工业工程)浏览器滚动条的颜色。但是钢性铸铁只能是改变工业管理学(工业工程)浏览器的颜色，而且半铸钢钢性铸铁(铸造半钢)不能做到改变火狐浏览器的样式和颜色。所以只能是通过Java脚本语言来实现了。也有插件可以做到。我分享一下我自己使用原生Java脚本语言实现的思路。先上个图看下效果：

Java脚本语言实现的思路就是模拟浏览器自身滚动条。我制作的思路是先将整个文档放在一个容器里面，然后通过改变容器里面的差异的顶端值来实现滚动效果布局如下：

样式* {边际：0划水：0;} body { overflow : hidden } # box { float : right to :0 right :0宽度：20 px背景# ccc位置：相对；} #拖动{位置：绝对左侧：0 :0宽度：20 px背景：绿色；} #内容{位置：绝对；左： 0；}/style body div id=' box ' div id=' drag '/div/div div id=' content ' div style=' background : # CCC；宽度： 100像素虽然很多人都在谈论量子计算的超强性能，比如一秒钟完成当前超级计算机几年的计算任务，但至今没有创造出真正意义上的量子计算机，其中一个很重要的原因就是，量子计算中使用的粒子状态并不稳定，而且任何电磁或物理干扰都很容易扰乱其工作。马约拉费米子的状态非常稳定，这使得它成为制造量子计算机的完美选择。半年前在上海交通大学实验室，贾金凤成功将其抓获。说到这一幕，贾金凤说了："其实我开始听到了马约拉纳费米子，我觉得这个东西20年后可能就做不出来了。贾金峰的研究团队使用一种特殊的材料制备方法，在厚度为5纳米的超导体上生长了拓扑绝缘体。制备了拓扑超导体材料，最终在拓扑超导体的界面上发现了马约拉纳费米子。这个神秘的粒子被捕获了80年，也让贾金凤更加坚定了对其制造量子计算机的信心。谈到未来的计划，贾金凤说'我希望在几年内做好拓扑量子位！（之前)世界还没有，所以如果我们从点切入这个，我们跟世界是一样的起跑线，对于我们国家来说，这是能够追上量子计算脚步的一个起点。分区/分区/正文先定义滑块和滑动条，然后在定义一个装内容的盒子，布局很简单身体的泛滥设置成隐藏的隐藏默认滚动条。

实现主要思路就是：滑块移动距离/滑块滚动范围=内容滚动距离/内容可滚动高度；滑块移动距离就是鼠标按下后拖动的距离，

内容可滚动高度就是内容总高度减去可视区域高度。另外，滚动条的总高度就是可视区域的高度，滑块的高度=可视区域的高度/内容的总高度*可视区域的高度。最后就是判断浏览器是否是火狐。

脚本类型=' text/JavaScript '窗口。onload=function(){ var oBox=document。getelementbyid(' box ')；var oDrag=文档。getelementbyid(' drag ')；var内容=文档。getelementbyid(' content ')；var视图高度=文档。文档元素。客户身高；var con高度=内容。客户端高度obox。风格。高度=视图高度“px”；奥德拉格。风格。高度=视图高度/con高度*视图高度' px '；窗户。onresize=function(){ view height=document。文档元素。客户身高；obox。风格。高度=视图高度“px”；奥德拉格。风格。高度=视图高度/con高度*视图高度' px '；奥德拉格。风格。top=-内容。offsettop/(内容。客户端高度-视图高度)*(obox。客户端高度-odrag。客户端高度)' px '；} odrag。onmousedown=function(ev){//阻止默认事件var e=ev | | window . event if(e . prevent default){ e . prevent default()；} else { e.returnValue=false }//e.clientY鼠标当前坐标定义变量霜降=e . clienty-odrag。偏移；文件。onmousemove=function(ev){ var e=ev | | window。事件；var top=e . clienty-霜降；if(top=0){ top=0；};if(top=obox。客户端高度-odrag。客户端高度){ top=obox。客户端高度-odrag。客户身高；};var scale=top/(obox。客户端高度-odrag。客户端高度)；var contentY=scale *(内容)。客户端高度-视图高度)；奥德拉格。风格。top=top“px”；内容。风格。top=-ContentY ' px '；}文档。onmouseup=function(){ document。onmousemove=null} } var str=窗口。领航员。用户代理。tolowercase()；//火狐浏览器if (str.indexOf('firefox ')！=-1){文档。addeventlistener(' domousescroll '，函数(e){ e . prevent default()；//阻止窗口默认的滚动事件if(e . detail 0){ var scrolhei=content。偏移25；if(scrolhei=0){ scrolhei=0；};if(scrolhei=-(content。客户端高度-视图高度)){ scrolhei=-(内容。客户端高度-视图高度)；};var scale=scrolhei/(content。客户端高度-视图高度)；var top=scale *(obox。客户端高度-odrag。客户端高度)；内容。风格。top=滚动hei ' px奥德拉格。风格。top=-top ' px '；} if(e . detail 0){ var scrolhei=content。offset top-25；if(scrolhei=0){ scrolhei=0；};if(scrolhei=-(content。客户端高度-视图高度)){ scrolhei=-(内容。客户端高度-视图高度)；};var scale=scrolhei/(content。客户端高度-视图高度)；var top=scale *(obox。客户端高度-odrag。客户端高度)；内容。风格。top=滚动hei ' px奥德拉格。风格。top=-top ' px '；};}，false)；} else{//非火狐浏览器文件。onmousewheel=function(ev){ var e=ev | | window。事件；if(e . prevent default){ e . prevent default()；} else { e.returnValue=false }if(e . wheel delta 0){ var scrolhei=content。偏移25；if(scrolhei=0){ scrolhei=0；};if(scrolhei=-(content。客户端高度-视图高度)){ scrolhei=-(内容。客户端高度-视图高度)；};var scale=scrolhei/(content。客户端高度-视图高度)；var top=scale *(obox。客户端高度-odrag。客户端高度)；内容。风格。top=滚动hei ' px奥德拉格。风格。top=-top ' px '；};if(e . wheel delta 0){ var scrolhei=content。offset top-25；if(scrolhei=0){ scrolhei=0；};if(scrolhei=-(content。客户端高度-视图高度)){ scrolhei=-(内容。客户端高度-视图高度)；};var scale=scrolhei/(content。客户端高度-视图高度)；var top=scale *(obox。客户端高度-odrag。客户端高度)；内容。风格。top=滚动hei ' px奥德拉格。风格。top=-top ' px '；};} } }/脚本以上就是我自己实现的整个过程，其中也存在不少BUG，比如没有解决浏览器缩放时候的问题。感谢大家的阅读，如有指正的地方欢迎大家指正纠错

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！