Heim > Artikel > Web-Frontend > js implementiert eine einfache vertikale Bildlaufleiste

js implementiert eine einfache vertikale Bildlaufleiste

高洛峰Original: 2017-02-23 17:37:151445Durchsuche

In diesem Artikel wird hauptsächlich der Beispielcode von js zum Implementieren einer einfachen vertikalen Bildlaufleiste vorgestellt, der einen sehr guten Referenzwert hat. Schauen wir ihn uns mit dem folgenden Editor an

Rendering:

Der Code lautet wie folgt:

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>垂直滚动条</title>
 <style type="text/css">
  .con {
  width: 350px;
  height: 600px;
  border: 1px solid saddlebrown;
  position: relative;
  overflow: hidden;
  }
  .txtBox{
  position: absolute;
  padding-left: 8px;
  padding-right: 36px;
  left: 0px;
  top: 0;
  }
  .bar {
  width: 26px;
  height: 100%;
  background: gainsboro;
  position: absolute;
  top: 0;
  right: 0;
  }
  .drdap {
  width: 100%;
  height: 100px;
  background: steelblue;
  border-radius: 10px;
  position: absolute;
  cursor: pointer;
  left: 0;
  top: 0;
  }
 </style>
 </head>
 <body>
 <p class="con">
  <p class="txtBox">
  人的一生至少有两次冲动，一次说走就走的旅行和一次奋不顾身的爱情。如果你有些厌倦现在的生活状态，一场冒险式的旅行便是你的解药。免费落地签已开放，来#迪拜#穿越沙漠海洋，感受异国的多元文化，也许还能收获一份真挚的爱情，结束你的单身岁月，将一个又一个精彩纷呈的旅行故事镌刻在自己生命里。你是否也有这样的冒险经历？人的一生至少有两次冲动，一次说走就走的旅行和一次奋不顾身的爱情。如果你有些厌倦现在的生活状态，一场冒险式的旅行便是你的解药。免费落地签已开放，来#迪拜#穿越沙漠海洋，感受异国的多元文化，也许还能收获一份真挚的爱情，结束你的单身岁月，将一个又一个精彩纷呈的旅行故事镌刻在自己生命里。你是否也有这样的冒险经历？<br />人的一生至少有两次冲动，一次说走就走的旅行和一次奋不顾身的爱情。如果你有些厌倦现在的生活状态，一场冒险式的旅行便是你的解药。免费落地签已开放，来#迪拜#穿越沙漠海洋，感受异国的多元文化，也许还能收获一份真挚的爱情，结束你的单身岁月，将一个又一个精彩纷呈的旅行故事镌刻在自己生命里。你是否也有这样的冒险经历？<br />人的一生至少有两次冲动，一次说走就走的旅行和一次奋不顾身的爱情。如果你有些厌倦现在的生活状态，一场冒险式的旅行便是你的解药。免费落地签已开放，来#迪拜#穿越沙漠海洋，感受异国的多元文化，也许还能收获一份真挚的爱情，结束你的单身岁月，将一个又一个精彩纷呈的旅行故事镌刻在自己生命里。你是否也有这样的冒险经历？<br />人的一生至少有两次冲动，一次说走就走的旅行和一次奋不顾身的爱情。如果你有些厌倦现在的生活状态，一场冒险式的旅行便是你的解药。免费落地签已开放，来#迪拜#穿越沙漠海洋，感受异国的多元文化，也许还能收获一份真挚的爱情，结束你的单身岁月，将一个又一个精彩纷呈的旅行故事镌刻在自己生命里。你是否也有这样的冒险经历？人的一生至少有两次冲动，一次说走就走的旅行和一次奋不顾身的爱情。如果你有些厌倦现在的生活状态，一场冒险式的旅行便是你的解药。免费落地签已开放，来#迪拜#穿越沙漠海洋，感受异国的多元文化，也许还能收获一份真挚的爱情，结束你的单身岁月，将一个又一个精彩纷呈的旅行故事镌刻在自己生命里。你是否也有这样的冒险经历？<br />人的一生至少有两次冲动，一次说走就走的旅行和一次奋不顾身的爱情。如果你有些厌倦现在的生活状态，一场冒险式的旅行便是你的解药。免费落地签已开放，来#迪拜#穿越沙漠海洋，感受异国的多元文化，也许还能收获一份真挚的爱情，结束你的单身岁月，将一个又一个精彩纷呈的旅行故事镌刻在自己生命里。你是否也有这样的冒险经历？人的一生至少有两次冲动，一次说走就走的旅行和一次奋不顾身的爱情。如果你有些厌倦现在的生活状态，一场冒险式的旅行便是你的解药。免费落地签已开放，来#迪拜#穿越沙漠海洋，感受异国的多元文化，也许还能收获一份真挚的爱情，结束你的单身岁月，将一个又一个精彩纷呈的旅行故事镌刻在自己生命里。你是否也有这样的冒险经历？
  </p>
  <p class="bar">
  <p class="drdap"></p>
  </p>
 </p>
 </body>
 <script type="text/javascript">
 var con = document.querySelector(&#39;.con&#39;);
 var txtBox = document.querySelector(&#39;.txtBox&#39;);
 var bar = document.querySelector(&#39;.bar&#39;);
 var drdap = document.querySelector(&#39;.drdap&#39;);
 //滚动条的高度 = 内容高度/内容盒子高度*内容高度
 drdap.style.height = con.offsetHeight/txtBox.offsetHeight*con.offsetHeight + &#39;px&#39;;
 drdap.onmousedown = function(ev){
  var disy = ev.clientY - drdap.offsetTop;
  document.onmousemove = function(ev){
  var currtY= ev.clientY - disy;
  if (currtY<0) { currtY = 0;}
  if (currtY>bar.offsetHeight-drdap.offsetHeight) {currtY = bar.offsetHeight-drdap.offsetHeight;}
  drdap.style.top = currtY + &#39;px&#39;;
  var scalY = currtY/(bar.offsetHeight-drdap.offsetHeight);
  console.log(txtBox.offsetHeight * scalY)
  txtBox.style.top = scalY * (con.offsetHeight - txtBox.offsetHeight ) + &#39;px&#39;
  }
  document.onmouseup = function(ev){
  document.onmousemove = null;
  }
  return false;
 }
 </script>
</html>

Weitere js-Implementierungen Für Artikel zu einfachen vertikalen Bildlaufleisten beachten Sie bitte die chinesische 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：Reines JS zur Implementierung eines KarusselldiagrammsNächster Artikel：Reines JS zur Implementierung eines Karusselldiagramms

In Verbindung stehende Artikel

Mehr sehen