suchen

Heim >Web-Frontend >js-Tutorial >Die benutzerdefinierte JavaScript-Browser-Bildlaufleiste ist mit IE, Firefox und Chrome kompatibel

Die benutzerdefinierte JavaScript-Browser-Bildlaufleiste ist mit IE, Firefox und Chrome kompatibel

高洛峰
高洛峰Original
2017-01-07 13:22:301192Durchsuche

Heute möchte ich die von mir selbst erstellte Browser-Bildlaufleiste mit Ihnen teilen. Wir wissen, dass die Verwendung von CSS zum Anpassen der Bildlaufleiste auch eine gute Möglichkeit ist, den Stil der Bildlaufleiste des Chrome-Browsers zu ändern Auch die Farbe der Bildlaufleiste des IE-Browsers kann angepasst werden. Allerdings kann CSS nur die Farbe von IE ändern, und CSS kann den Stil und die Farbe von Firefox nicht ändern. Dies kann also nur über JavaScript erreicht werden. Es gibt auch Plugins, die das können. Lassen Sie mich meine eigenen Implementierungsideen mit nativem JavaScript teilen. Schauen wir uns den Effekt im letzten Bild an:

JavaScript自定义浏览器滚动条兼容IE、 火狐和chrome

Die Idee der JavaScript-Implementierung besteht darin, die browsereigene Bildlaufleiste zu simulieren. Meine Idee ist, zuerst das gesamte Dokument in einen Container zu legen und dann den oberen Wert des Div im Container zu ändern, um den Scroll-Effekt zu erzielen. Das Layout ist wie folgt: 

<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&#39;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>

Definieren Sie zuerst den Schieberegler und Schieberegler, und dann Beim Definieren einer Box mit Inhalt ist das Layout sehr einfach. Der Überlauf des Körpers ist auf ausgeblendet eingestellt, um die Standard-Bildlaufleiste auszublenden.

Die Hauptidee der Implementierung ist: Schieber-Bewegungsentfernung/Schieberegler-Bildlaufbereich = Inhalts-Bildlaufentfernung/Inhalts-Bildlaufhöhe; die Schieberegler-Bewegungsentfernung ist die Entfernung, die nach dem Drücken der Maus zurückgelegt wird,

Die scrollbare Höhe des Inhalts ist die Gesamthöhe des Inhalts minus der Höhe des sichtbaren Bereichs. Darüber hinaus ist die Gesamthöhe der Bildlaufleiste die Höhe des visuellen Bereichs. Die Höhe des Schiebereglers = die Höhe des visuellen Bereichs/die Gesamthöhe des Inhalts*die Höhe des visuellen Bereichs. Der letzte Schritt besteht darin, festzustellen, ob der Browser Firefox ist. 

<script type="text/javascript">
window.onload=function(){
 var oBox=document.getElementById(&#39;box&#39;);
 var oDrag=document.getElementById(&#39;drag&#39;);
 var content=document.getElementById(&#39;content&#39;);
 var viewHeight=document.documentElement.clientHeight;
 var conHeight=content.clientHeight
 oBox.style.height=viewHeight+&#39;px&#39;;
oDrag.style.height=viewHeight/conHeight*viewHeight+&#39;px&#39;;
 window.onresize = function(){
 viewHeight=document.documentElement.clientHeight;
 oBox.style.height=viewHeight+&#39;px&#39;;
oDrag.style.height=viewHeight/conHeight*viewHeight+&#39;px&#39;;
 oDrag.style.top=-content.offsetTop/(content.clientHeight-viewHeight)*(oBox.clientHeight-oDrag.clientHeight)+&#39;px&#39;; 
 }
 oDrag.onmousedown=function (ev){
 //阻止默认事件
 var e=ev||window.event;
 if (e.preventDefault) {
  e.preventDefault();
 } else{
  e.returnValue=false;
 };
  //e.clientY鼠标当前坐标
 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+&#39;px&#39;;
  content.style.top=-contentY+&#39;px&#39;;
 }
 document.onmouseup=function (){
  document.onmousemove=null;
 }
 }
 var str=window.navigator.userAgent.toLowerCase();
 //火狐浏览器
 if (str.indexOf(&#39;firefox&#39;)!=-1){
  document.addEventListener(&#39;DOMMouseScroll&#39;,function (e){
  e.preventDefault();//阻止窗口默认的滚动事件
  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+&#39;px&#39;;
  oDrag.style.top=-top+&#39;px&#39;;
  }
  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+&#39;px&#39;;
  oDrag.style.top=-top+&#39;px&#39;;
  };
 },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+&#39;px&#39;;
  oDrag.style.top=-top+&#39;px&#39;;
  };
  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+&#39;px&#39;;
  oDrag.style.top=-top+&#39;px&#39;;
  };
 }
 }
}
</script>

Das Obige ist der gesamte Prozess meiner eigenen Implementierung. Es gibt auch viele Fehler, wie zum Beispiel das Problem des Browser-Zooms. Vielen Dank fürs Lesen. Wenn Sie Korrekturen haben, können Sie diese gerne korrigieren.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass der Inhalt dieses Artikels jedem beim Lernen oder Arbeiten helfen kann . Ich hoffe auch auf Ihre Unterstützung.

Weitere benutzerdefinierte JavaScript-Browser-Bildlaufleisten, die mit IE, Firefox und Chrome kompatibel sind, finden Sie auf der chinesischen PHP-Website!


Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Bringen Sie Ihnen Schritt für Schritt bei, wie Sie mit jQyery ein Karussell implementierenNächster Artikel：Bringen Sie Ihnen Schritt für Schritt bei, wie Sie mit jQyery ein Karussell implementieren

In Verbindung stehende Artikel

Mehr sehen