JavaScript 사용자 정의 브라우저 스크롤 막대는 IE, Firefox 및 Chrome과 호환됩니다.-JS 튜토리얼-php.cn

JavaScript 사용자 정의 브라우저 스크롤 막대는 IE, Firefox 및 Chrome과 호환됩니다.

高洛峰

풀어 주다： 2017-01-07 13:22:30

원래의

1124명이 탐색했습니다.

오늘은 제가 직접 만든 브라우저 스크롤 바를 공유하고 싶습니다. CSS를 사용하여 스크롤 바를 맞춤설정하는 것도 좋은 방법이지만 CSS를 사용하면 Chrome 브라우저의 스크롤 바 스타일을 변경할 수 있습니다. CSS도 변경할 수 있습니다. 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 중국어 웹사이트에 주목하세요!