原生js封裝自訂捲軸的程式碼案例分享-js教程-PHP中文網

首頁

web前端

js教程

原生js封裝自訂捲軸的程式碼案例分享

黄舟

Mar 25, 2017 pm 02:49 PM

本文主要介紹了原生js封裝自訂捲軸的相關知識。具有很好的參考價值。下面跟著小編一起來看下吧

最近有一個關於製作線上音樂播放器的項目，需要使用一個滾動條，但是自帶滾動條實在是太醜了，所以就自己琢磨了一下自訂的滾動條。

在網路上看原理，說實話沒怎麼看懂，就趁今天早上上安卓的時候，研究了一下，結果還算是滿意吧。然後就包裝一個物件。

使用方法很簡單，就是自訂一個p，將這個物件匯入做參數，new一下就可以。也可以自己定義捲軸的樣式，只要自己修改一下樣式表就可以

效果圖：

原生js封裝自訂捲軸的程式碼案例分享

##程式碼如下：

<!doctype html> 
<html> 
<head> 
 <meta charset="utf-8"> 
 <title></title> 
</head>
<style type="text/css">
p{
 padding:0px;
 box-sizing:border-box;
 margin:0px;
 border:0px;
}
#p-5{
 width: 700px;
 height: 500px;
 border:1px solid black;
 position: relative;
 overflow: hidden;
}
.ribbit-OF-p1{
 width: 20px;
 background-color: rgb(239, 238, 238);
 border:1px solid rgba(0,0,0,0.5);
 position: absolute;
 right:0px;
 top: 0px;
 cursor:default;
}
.ribbit-OF-p2{
 position: absolute;
 top:0px;
 right: 0px;
 width: 100%;
 height: 100px;
 background-color:rgba(0,0,0,0.3);
 border-radius: 10px;
}
.ribbit-OF-p3{
 width: 100%;
 height:auto;
 background-color: lime;
}
</style>
<body>
<p id="p-1">
<p id="p-2">

</p> 
</p>
<p id="p-3"><p id="p-4"></p></p>
<p id="p-5">
  123123<br/>
qwe<br/>
12asd23<br/>
asd3123<br/>
qwe123<br/>
235423423<br/>
azxc123<br/>
123123<br/>
qwe<br/>
12asd23<br/>
asd3123<br/>
qwe123<br/>
235423423<br/>
azxc123<br/>
123123<br/>
qwe<br/>
12asd23<br/>
asd3123<br/>
qwe123<br/>
235423423<br/>
azxc123<br/>
123123<br/>
qwe<br/>
12asd23<br/>
asd3123<br/>
qwe123<br/>
235423423<br/>
azxc123<br/>
123123<br/>
qwe<br/>
12asd23<br/>
asd3123<br/>
qwe123<br/>
235423423<br/>
azxc123<br/>
123123<br/>
qwe<br/>
12asd23<br/>
asd3123<br/>
qwe123<br/>
235423423<br/>
azxc123<br/>123123<br/>
qwe<br/>
12asd23<br/>
asd3123<br/>
qwe123<br/>
235423423<br/>
azxc123<br/>
123123<br/>
qwe<br/>
12asd23<br/>
asd3123<br/>
qwe123<br/>
235423423<br/>
azxc123<br/>
123123<br/>
qwe<br/>
12asd23<br/>
asd3123<br/>
qwe123<br/>
235423423<br/>
azxc123<br/>
</p>
</body>
<script type="text/javascript">
var p_5 = document.getElementById(&#39;p-5&#39;);
function OverFlow(element){
 this.element = element;
 this.ribbit_OF_p1 = document.createElement("p");
 this.ribbit_OF_p2 = document.createElement("p");
 this.ribbit_OF_p3 = document.createElement("p");
 this.createp = function(){
  this.ribbit_OF_p1.className = "ribbit-OF-p1";
  this.ribbit_OF_p2.className = "ribbit-OF-p2";
  this.ribbit_OF_p3.className = "ribbit-OF-p3";
  this.ribbit_OF_p3.innerHTML = this.element.innerHTML;
  this.element.innerHTML="";
  this.element.appendChild(this.ribbit_OF_p3);
  this.ribbit_OF_p1.appendChild(this.ribbit_OF_p2);
  document.body.appendChild(this.ribbit_OF_p1);
  this.ribbit_OF_p1.style.height = getComputedStyle(this.element,null).height;
  this.ribbit_OF_p1.style.left = (this.element.offsetLeft+(parseInt(getComputedStyle(this.element,null).width)
  -parseInt(getComputedStyle(this.ribbit_OF_p1,null).width)))+"px";
  this.ribbit_OF_p1.style.top = this.element.offsetTop+"px";
  this.ribbit_OF_p2.style.top = "0px";
 }
 this.addAudo=function(){
  var YY=null;//前鼠标位置
  var topXX = 0;//前top位置
  var topX = 0;//后top值
  var vherght = parseInt(getComputedStyle(this.ribbit_OF_p3,null).height)-parseInt(getComputedStyle(this.element,null).height);//可移动
  var dst = 0;
  //最大top移动位置
  var top_x = parseInt(getComputedStyle(this.ribbit_OF_p1,null).height)-parseInt(getComputedStyle(this.ribbit_OF_p2,null).height);
  var thio = this;
  window.onmousemove = function(e){
   fun(e.clientY);
  };
  this.ribbit_OF_p2.onmousedown=function(e){
   YY = e.clientY;
   topXX =parseInt(this.style.top);
   return false;
  }
  window.onmouseup=function(){
   YY = null;
   return true;
  }
  function fun(y){
   if(top_x>=topX&&topX>=0&&YY!=null){
    topX = y-YY+topXX;
    if(topX<0)topX=0;
    if(topX>top_x)topX=top_x-1;
    thio.ribbit_OF_p2.style.top = (topX-1)+"px";
    dst = topX*vherght/top_x;
    thio.element.scrollTop = dst;
   }
  }
 }
 this.createp();
 this.addAudo();
}
new OverFlow(p_5);
</script>
</html>

登入後複製

以上是原生js封裝自訂捲軸的程式碼案例分享的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

熱工具

熱門話題

gmail信箱登陸入口在哪裡

7828

Java教學

1648

CakePHP 教程

1402

Laravel 教程

1300

PHP教程

1239

Related knowledge

如何在Netflix中快速設定自訂頭像 Feb 19, 2024 pm 06:33 PM

Netflix上的頭像是你串流媒體身分的視覺化代表。使用者可以超越預設的頭像來展現自己的個性。繼續閱讀這篇文章，了解如何在Netflix應用程式中設定自訂個人資料圖片。如何在Netflix中快速設定自訂頭像在Netflix中，沒有內建功能來設定個人資料圖片。不過，您可以透過在瀏覽器上安裝Netflix擴充功能來實現此目的。首先，在瀏覽器上安裝Netflix擴充功能的自訂個人資料圖片。你可以在Chrome商店買到它。安裝擴充功能後，在瀏覽器上開啟Netflix並登入您的帳戶。導航至右上角的個人資料，然後點擊

建議：優秀JS開源人臉偵測辨識項目 Apr 03, 2024 am 11:55 AM

人臉偵測辨識技術已經是一個比較成熟且應用廣泛的技術。而目前最廣泛的網路應用語言非JS莫屬，在Web前端實現人臉偵測辨識相比後端的人臉辨識有優勢也有弱勢。優點包括減少網路互動、即時識別，大大縮短了使用者等待時間，提高了使用者體驗；弱勢是：受到模型大小限制，其中準確率也有限。如何在web端使用js實現人臉偵測呢？為了實現Web端人臉識別，需要熟悉相關的程式語言和技術，如JavaScript、HTML、CSS、WebRTC等。同時也需要掌握相關的電腦視覺和人工智慧技術。值得注意的是，由於Web端的計

Eclipse中自訂快捷鍵設定的方法 Jan 28, 2024 am 10:01 AM

如何在Eclipse中自訂快捷鍵設定？身為開發人員，在使用Eclipse進行編碼時，熟練快捷鍵是提高效率的關鍵之一。 Eclipse作為一個強大的整合開發環境，不僅提供了許多預設的快捷鍵，還允許使用者根據自己的偏好進行個人化的客製化。本文將介紹如何在Eclipse中自訂快捷鍵設置，並給出具體的程式碼範例。打開Eclipse首先，打開Eclipse，並進入

股票分析必備工具：學習PHP和JS繪製蠟燭圖的步驟 Dec 17, 2023 pm 06:55 PM

股票分析必備工具：學習PHP和JS繪製蠟燭圖的步驟，需要具體程式碼範例隨著網路和科技的快速發展，股票交易已成為許多投資者的重要途徑之一。而股票分析是投資人決策的重要一環，其中蠟燭圖被廣泛應用於技術分析。學習如何使用PHP和JS繪製蠟燭圖將為投資者提供更多直觀的信息，幫助他們更好地做出決策。蠟燭圖是一種以蠟燭形狀來展示股票價格的技術圖表。它展示了股票價格的

如何使用PHP和JS創建股票蠟燭圖 Dec 17, 2023 am 08:08 AM

如何使用PHP和JS創建股票蠟燭圖股票蠟燭圖是股票市場中常見的技術分析圖形，透過繪製股票的開盤價、收盤價、最高價和最低價等數據，幫助投資者更直觀地了解股票的價格波動情形。本文將教你如何使用PHP和JS創建股票蠟燭圖，並附上具體的程式碼範例。一、準備工作在開始之前，我們需要準備以下環境：1.一台運行PHP的伺服器2.一個支援HTML5和Canvas的瀏覽器3

edius自訂螢幕佈局的操作流程 Mar 27, 2024 pm 06:50 PM

1.下圖是edius預設的螢幕佈局，預設的EDIUS視窗佈局是橫向版式，因此在單一顯示器環境中，許多視窗是重疊在一起的，且預覽視窗為單一視窗模式。 2、您可以透過【檢視】選單列啟用【雙視窗模式】，使預覽視窗同時顯示播放視窗和錄製視窗。 3.您可以透過【檢視功能表列>視窗佈局>常規】來恢復預設螢幕佈局。另外您也可以自訂適合您的佈局方式，並儲存為常用螢幕佈局：將視窗拖曳成適合自己的佈局，然後點擊【檢視>視窗佈局>儲存目前佈局>新建】，在彈出的【儲存目前佈局】小視窗中輸入佈局名稱，按確定

PHP與JS開發技巧：掌握繪製股票蠟燭圖的方法 Dec 18, 2023 pm 03:39 PM

隨著網路金融的快速發展，股票投資已經成為了越來越多人的選擇。而在股票交易中，蠟燭圖是常用的技術分析方法，它能夠顯示股票價格的變動趨勢，幫助投資人做出更精準的決策。本文將透過介紹PHP和JS的開發技巧，帶領讀者了解如何繪製股票蠟燭圖，並提供具體的程式碼範例。一、了解股票蠟燭圖在介紹如何繪製股票蠟燭圖之前，我們首先需要先了解什麼是蠟燭圖。蠟燭圖是由日本人