亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

JavaScript自定義瀏覽器滾動(dòng)條兼容IE、 火狐和chrome

 更新時(shí)間:2017年01月05日 14:53:28   作者:依然仰望  
本文主要分享了使用原生JavaScript實(shí)現(xiàn)自定義瀏覽器滾動(dòng)條兼容IE、 火狐和chrome的思路與方法,具有一定的參考價(jià)值,下面跟著小編一起來(lái)看下吧

今天為大家分享一下我自己制作的瀏覽器滾動(dòng)條,我們知道用css來(lái)自定義滾動(dòng)條也是挺好的方式,css雖然能夠改變chrome瀏覽器的滾動(dòng)條樣式可以自定義,css也能夠改變IE瀏覽器滾動(dòng)條的顏色。但是css只能是改變IE瀏覽器的顏色,而且CSS不能做到改變火狐瀏覽器的樣式和顏色。所以只能是通過(guò)JavaScript來(lái)實(shí)現(xiàn)了。也有插件可以做到。我分享一下我自己使用原生JavaScript實(shí)現(xiàn)的思路。先上個(gè)圖看下效果:

JavaScript實(shí)現(xiàn)的思路就是模擬瀏覽器自身滾動(dòng)條。我制作的思路是先將整個(gè)文檔放在一個(gè)容器里面,然后通過(guò)改變?nèi)萜骼锩娴膁iv的top值來(lái)實(shí)現(xiàn)滾動(dòng)效果布局如下:

<style>
 *{
 margin:0;
 padding:0;
 }
 body{
 overflow:hidden;
 }
 #box{
 float:right;
 top:0;
 right:0;
 width:20px;
 background:#ccc;
 position:relative;
 }
 #drag{
 position: absolute;
 top:0
 left:0;
 width:20px;
 background:green;
 }
 #content{
 position:absolute;
 left: 0;
 }
</style>
<body>
 <div id="box">
 <div id="drag"></div>
 </div>
 <div id="content">
 <div style="background:#ccc;width: 100px;">
  Although many people talk about the super performance of quantum computing, such as one second to complete the current supercomputer computing tasks for several years, but so far did not create a true sense of the quantum computer, one of the very important reason is that, The state of particles used in quantum computation is not stable, and any electromagnetic or physical interference can easily disrupt its work. The state of the Mayola fermion is very stable, which makes it a perfect choice for making quantum computers. Six months ago in the laboratory of Shanghai Jiaotong University, Jia Jinfeng successfully captured it.
  Speaking of the scene, Jia Jinfeng said: "In fact, I started to hear the Mayolana fermions, I think this thing may not be done 20 years out.
  Using a special material preparation method, Jia Jinfeng's research team has grown topological insulators on the superconductors with thickness of 5 nanometers. The topological superconductor materials are prepared and finally the Mayolana fermions are found at the interface of the topological superconductors. The mysterious particles were captured 80 years, but also let Jia Jinfeng more firm with its confidence in the manufacture of quantum computers.
  Speaking of the future of the plan, Jia Jinfeng said: "I hope to within a few years to do the topological quantum bit!" (Before) the world has not, so if we cut into this from the point, we are the same with the world The starting line, for our country, this is able to catch up with the footsteps of quantum computing, a starting point.
 <div>
 </div>
</body>

先定義滑塊和滑動(dòng)條,然后在定義一個(gè)裝內(nèi)容的盒子,布局很簡(jiǎn)單,body的 overflow設(shè)置成hidden隱藏默認(rèn)滾動(dòng)條。

實(shí)現(xiàn)主要思路就是:滑塊移動(dòng)距離/滑塊滾動(dòng)范圍=內(nèi)容滾動(dòng)距離/內(nèi)容可滾動(dòng)高度;滑塊移動(dòng)距離就是鼠標(biāo)按下后拖動(dòng)的距離,

內(nèi)容可滾動(dòng)高度就是內(nèi)容總高度減去可視區(qū)域高度。另外,滾動(dòng)條的總高度就是可視區(qū)域的高度,滑塊的高度=可視區(qū)域的高度/內(nèi)容的總高度*可視區(qū)域的高度。最后就是判斷瀏覽器是否是火狐。

<script type="text/javascript">
window.onload=function(){
 var oBox=document.getElementById('box');
 var oDrag=document.getElementById('drag');
 var content=document.getElementById('content');
 var viewHeight=document.documentElement.clientHeight;
 var conHeight=content.clientHeight
 oBox.style.height=viewHeight+'px';
oDrag.style.height=viewHeight/conHeight*viewHeight+'px';
 window.onresize = function(){
 viewHeight=document.documentElement.clientHeight;
 oBox.style.height=viewHeight+'px';
oDrag.style.height=viewHeight/conHeight*viewHeight+'px';
 oDrag.style.top=-content.offsetTop/(content.clientHeight-viewHeight)*(oBox.clientHeight-oDrag.clientHeight)+'px'; 
 }
 oDrag.onmousedown=function (ev){
 //阻止默認(rèn)事件
 var e=ev||window.event;
 if (e.preventDefault) {
  e.preventDefault();
 } else{
  e.returnValue=false;
 };
  //e.clientY鼠標(biāo)當(dāng)前坐標(biāo)
 var downY=e.clientY-oDrag.offsetTop;
 document.onmousemove=function (ev){
  var e=ev||window.event;
  var top=e.clientY-downY;
  if (top<=0) {
  top=0;
  };
  if (top>=oBox.clientHeight-oDrag.clientHeight) {
  top=oBox.clientHeight-oDrag.clientHeight;
  };
  var scale=top/(oBox.clientHeight-oDrag.clientHeight);
  var contentY=scale*(content.clientHeight-viewHeight);
  oDrag.style.top=top+'px';
  content.style.top=-contentY+'px';
 }
 document.onmouseup=function (){
  document.onmousemove=null;
 }
 }
 var str=window.navigator.userAgent.toLowerCase();
 //火狐瀏覽器
 if (str.indexOf('firefox')!=-1){
  document.addEventListener('DOMMouseScroll',function (e){
  e.preventDefault();//阻止窗口默認(rèn)的滾動(dòng)事件
  if (e.detail<0) {
  var scrollHei=content.offsetTop+25;
  if (scrollHei>=0) {
   scrollHei=0;
  };
  if (scrollHei<=-(content.clientHeight-viewHeight)) {
   scrollHei=-(content.clientHeight-viewHeight);
  };
  var scale=scrollHei/(content.clientHeight-viewHeight);
  var top=scale*(oBox.clientHeight-oDrag.clientHeight);
  content.style.top=scrollHei+'px';
  oDrag.style.top=-top+'px';
  }
  if (e.detail>0) {
  var scrollHei=content.offsetTop-25;
  if (scrollHei>=0) {
   scrollHei=0;
  };
  if (scrollHei<=-(content.clientHeight-viewHeight)) {
   scrollHei=-(content.clientHeight-viewHeight);
  };
  var scale=scrollHei/(content.clientHeight-viewHeight);
  var top=scale*(oBox.clientHeight-oDrag.clientHeight);
  content.style.top=scrollHei+'px';
  oDrag.style.top=-top+'px';
  };
 },false);
 }
 else{//非火狐瀏覽器
 document.onmousewheel=function (ev){
  var e=ev||window.event;
  if (e.preventDefault) {
  e.preventDefault();
  } else{
  e.returnValue=false;
  };
  if (e.wheelDelta>0) {
  var scrollHei=content.offsetTop+25;
  if (scrollHei>=0) {
   scrollHei=0;
  };
  if (scrollHei<=-(content.clientHeight-viewHeight)) {
   scrollHei=-(content.clientHeight-viewHeight);
  };
  var scale=scrollHei/(content.clientHeight-viewHeight);
  var top=scale*(oBox.clientHeight-oDrag.clientHeight);
  content.style.top=scrollHei+'px';
  oDrag.style.top=-top+'px';
  };
  if (e.wheelDelta<0) {
  var scrollHei=content.offsetTop-25;
  if (scrollHei>=0) {
   scrollHei=0;
  };
  if (scrollHei<=-(content.clientHeight-viewHeight)) {
   scrollHei=-(content.clientHeight-viewHeight);
  };
  var scale=scrollHei/(content.clientHeight-viewHeight);
  var top=scale*(oBox.clientHeight-oDrag.clientHeight);
  content.style.top=scrollHei+'px';
  oDrag.style.top=-top+'px';
  };
 }
 }
}
</script>

以上就是我自己實(shí)現(xiàn)的整個(gè)過(guò)程,其中也存在不少BUG,比如沒有解決瀏覽器縮放時(shí)候的問(wèn)題。感謝大家的閱讀,如有指正的地方歡迎大家指正糾錯(cuò)

以上就是本文的全部?jī)?nèi)容,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助,同時(shí)也希望多多支持腳本之家!

相關(guān)文章

  • JavaScript繪制游戲地圖并且操控人物移動(dòng)

    JavaScript繪制游戲地圖并且操控人物移動(dòng)

    JavaScript開發(fā)小游戲,目標(biāo)是使用JavaScript繪制簡(jiǎn)單的二維地圖,采用二維數(shù)組存儲(chǔ)地圖信息,使用表格繪制地圖,每個(gè)td單元格存儲(chǔ)數(shù)據(jù),使用JavaScript keyPress鍵盤事件監(jiān)聽WASD鍵,按鍵觸發(fā)時(shí)人物做出相應(yīng)操作,人物下一步碰撞到障礙物,終止人物運(yùn)動(dòng)
    2023-10-10
  • JS倒計(jì)時(shí)兩種實(shí)現(xiàn)方式代碼實(shí)例

    JS倒計(jì)時(shí)兩種實(shí)現(xiàn)方式代碼實(shí)例

    這篇文章主要介紹了JS倒計(jì)時(shí)兩種實(shí)現(xiàn)方式代碼實(shí)例,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
    2020-07-07
  • Promise拋出錯(cuò)誤解決基礎(chǔ)示例詳解

    Promise拋出錯(cuò)誤解決基礎(chǔ)示例詳解

    這篇文章主要為大家介紹了Promise拋出錯(cuò)誤解決基礎(chǔ)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2022-12-12
  • js報(bào)錯(cuò) Object doesn''t support this property or method的原因分析

    js報(bào)錯(cuò) Object doesn''t support this property or method的原因分析

    運(yùn)行js是出現(xiàn)Object doesn't support this property or method 錯(cuò)誤的可能原因分析。
    2011-03-03
  • ECharts事件處理與旭日?qǐng)D實(shí)現(xiàn)

    ECharts事件處理與旭日?qǐng)D實(shí)現(xiàn)

    這篇文章介紹了ECharts事件處理與實(shí)現(xiàn)旭日?qǐng)D的方法,文中通過(guò)示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2022-06-06
  • JS中定位 position 的使用實(shí)例代碼

    JS中定位 position 的使用實(shí)例代碼

    本文通過(guò)實(shí)例代碼給大家介紹了JS中定位 position 的使用,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友參考下吧
    2017-08-08
  • javascript使用閉包模擬對(duì)象的私有屬性和方法

    javascript使用閉包模擬對(duì)象的私有屬性和方法

    本文給大家簡(jiǎn)單介紹了在一個(gè)項(xiàng)目中涉及到的javascript使用閉包模擬對(duì)象的私有屬性和方法,這里記錄下來(lái),分享給大家。
    2016-10-10
  • Bootstrap對(duì)話框使用實(shí)例講解

    Bootstrap對(duì)話框使用實(shí)例講解

    這篇文章主要為大家詳細(xì)介紹了Bootstrap對(duì)話框使用實(shí)例,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2016-09-09
  • JS中2種定時(shí)器的使用及清除的實(shí)現(xiàn)

    JS中2種定時(shí)器的使用及清除的實(shí)現(xiàn)

    本文主要介紹了JS中2種定時(shí)器的使用及清除的實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2022-08-08
  • js實(shí)現(xiàn)網(wǎng)頁(yè)五子棋進(jìn)階版

    js實(shí)現(xiàn)網(wǎng)頁(yè)五子棋進(jìn)階版

    這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)網(wǎng)頁(yè)五子棋進(jìn)階版,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2022-05-05

最新評(píng)論