欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

js實(shí)現(xiàn)滾動(dòng)條自動(dòng)滾動(dòng)

 更新時(shí)間：2020年12月13日 10:35:20   作者：一只安和  
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)滾動(dòng)條自動(dòng)滾動(dòng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了js實(shí)現(xiàn)滾動(dòng)條自動(dòng)滾動(dòng)的具體代碼，供大家參考，具體內(nèi)容如下

效果類似于直播網(wǎng)站的評(píng)論，會(huì)一條接著一條向上 go out ；

js部分很簡(jiǎn)單：通過(guò)控制scrollTop的值來(lái)實(shí)現(xiàn)自動(dòng)滾動(dòng)效果；

很重要兩點(diǎn)：   

1、scrollTop的值不可以加單位，謹(jǐn)記！

 2、網(wǎng)頁(yè)縮放比例會(huì)影響效果實(shí)現(xiàn)（下面具體說(shuō)）；

scrollTop需要注意的三點(diǎn)：

1、如果這個(gè)元素沒(méi)有被溢出，scrollTop為0；

2、設(shè)置的scrollTop值小于0，則scrollTop的值為0

3、如果設(shè)置scrollTop的值超出了這個(gè)容器滾動(dòng)的值，則scrollTop的值為容器最大值

js部分：

(function () {
  // 獲取父盒子（肯定有滾動(dòng)條）
  var parent = document.getElementById('parent');
  // 獲取子盒子（高度肯定比父盒子大）
  var child1 = document.getElementById('child1');
  var child2 = document.getElementById('child2');
  // 第一個(gè)子盒子內(nèi)容復(fù)制一遍給第二個(gè)子盒子，產(chǎn)生循環(huán)視覺(jué)，輔助作用
  // 可以注釋下這條代碼，看會(huì)出現(xiàn)什么情況
  child2.innerHTML = child1.innerHTML;
  // 設(shè)置定時(shí)器，時(shí)間即為滾動(dòng)速度
  setInterval(function () {
    if(parent.scrollTop >= child1.scrollHeight) {
      parent.scrollTop = 0;
    } else {
      // 如果存在網(wǎng)頁(yè)縮放，很有可能沒(méi)有效果，但是else部分的代碼會(huì)執(zhí)行
      // 原因：剛才講到的scrollTop三個(gè)注意中標(biāo)黃的一條
      // 設(shè)置scrollTop的值小于0，即scrollTop被設(shè)為0
      // 可以縮放跑一下，然后不刷新的狀態(tài)下恢復(fù)百分之百跑一下，再縮放，打印scrollTop的值
      // 你會(huì)發(fā)現(xiàn)正常尺寸執(zhí)行時(shí)打印的第一個(gè)值不是加法，而是減法，即scrollTop++增加負(fù)值
      // 這樣的話就對(duì)應(yīng)上了scrollTop的注意點(diǎn)了，增加的值小于0，就被設(shè)為0
      parent.scrollTop++;
    }
  }, 20);
})()

下面是完整demo，拉走直接看效果

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>autoScroll</title>
</head>
<style>
  .parent {
    width: 300px;
    height: 200px;
    margin: 0 auto;
    background: #242424;
    overflow-y: scroll;
  }
  /*設(shè)置的子盒子高度大于父盒子，產(chǎn)生溢出效果*/
  .child {
    height: auto;
  }
  .child li {
    height: 50px;
    margin: 2px 0;
    background: #009678;
  }
</style>
<body>
  <div id="parent" class="parent">
    <div id="child1" class="child">
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
    </div>
    <div id="child2" class="child"></div>
  </div>
  <script type="text/javascript">
    (function () {
      var parent = document.getElementById('parent');
      var child1 = document.getElementById('child1');
      var child2 = document.getElementById('child2');
      child2.innerHTML = child1.innerHTML;
      setInterval(function () {
        if(parent.scrollTop >= child1.scrollHeight) {
          parent.scrollTop = 0;
        } else {
          parent.scrollTop++;
        }
      }, 20);
    })()
  </script>
</body>
</html>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。 

相關(guān)文章

最新評(píng)論