JavaScript カスタムブラウザスクロールバーは IE、Firefox、Chrome と互換性があります-jsチュートリアル-php.cn

JavaScript カスタムブラウザスクロールバーは IE、Firefox、Chrome と互換性があります

高洛峰

リリース： 2017-01-07 13:22:30

オリジナル

1195 人が閲覧しました

今日は、私が作ったブラウザのスクロールバーを共有します。CSS を使用してスクロールバーをカスタマイズすることも良い方法であることはわかっていますが、CSS は Chrome ブラウザのスクロールバーのスタイルを変更してカスタマイズすることもできます。 IEのスクロールバーの色を変更します。ただし、CSS で変更できるのは IE の色だけであり、CSS で Firefox のスタイルや色を変更することはできません。したがって、これは JavaScript を通じてのみ実現できます。これを実行できるプラグインもあります。ネイティブ JavaScript を使用した私自身の実装アイデアを共有しましょう。最後の画像の効果を見てみましょう:

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

JavaScript 実装のアイデアは、ブラウザー独自のスクロールバーをシミュレートすることです。私の作成のアイデアは、最初にドキュメント全体をコンテナーに配置し、次にコンテナー内の div の先頭の値を変更してスクロール効果を実現することです。レイアウトは次のとおりです:

<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>

ログイン後にコピー

最初にスライダーを定義し、スライダーを作成し、コンテンツコンテナを定義します。ボックスのレイアウトは非常にシンプルで、本体のオーバーフローはデフォルトのスクロールバーを非表示に設定されています。

実装の主なアイデアは次のとおりです: スライダーの移動距離/スライダーのスクロール範囲 = コンテンツのスクロール距離/コンテンツのスクロール可能な高さ; スライダーの移動距離はマウスを押した後にドラッグされた距離、

コンテンツのスクロール可能な高さはコンテンツの合計の高さです。コンテンツ表示領域の高さを減算します。また、スクロールバーの合計の高さは、ビジュアル領域の高さ、スライダーの高さ = ビジュアル領域の高さ / コンテンツの合計の高さ * ビジュアル領域の高さになります。最後のステップは、ブラウザが Firefox であるかどうかを確認することです。

<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>

ログイン後にコピー

上記は私が自分で実装したプロセス全体です。ブラウザのズームの問題など、多くのバグもあります。読んでいただきありがとうございました。修正がある場合は、修正してください

この記事の内容があなたの学習や仕事に少しでも役立つことを願っています。 PHP中国語ウェブサイトをサポートしたいと思っています!

IE、Firefox、Chrome と互換性のある JavaScript カスタムブラウザスクロールバーの詳細については、PHP 中国語 Web サイトに注目してください。