Of Stack

js realizes automatic scrolling of scroll bar

  • 2021-10-13 06:17:38
  • OfStack

In this paper, we share the specific code of js to realize automatic scrolling of scroll bar for your reference. The specific contents are as follows

The effect is similar to the comments of the live broadcast website, and one will go up go out;;

The js part is very simple: the automatic scrolling effect is realized by controlling the value of scrollTop;

Two important points:

1. The value of scrollTop cannot be added to units, remember!

2. The scaling ratio of web pages will affect the realization of the effect (specifically described below);

Three points to pay attention to in scrollTop:

1. If this element is not overflowed, scrollTop is 0;

2. If the set value of scrollTop is less than 0, the value of scrollTop is 0

3. If the value of scrollTop is set to exceed the scrolled value of this container, the value of scrollTop is the maximum value of the container

js section: 


(function () {
  //  Get the parent box (there must be a scroll bar) 
  var parent = document.getElementById('parent');
  //  Get the child box (definitely higher than the parent box) 
  var child1 = document.getElementById('child1');
  var child2 = document.getElementById('child2');
  //  No. 1 1 Copy of sub-box content 1 Give every time 2 Sub-box, which produces circular vision and assists 
  //  You can comment on this code and see what happens 
  child2.innerHTML = child1.innerHTML;
  //  Set the timer, and the time is the scrolling speed 
  setInterval(function () {
    if(parent.scrollTop >= child1.scrollHeight) {
      parent.scrollTop = 0;
    } else {
      //  If there is page scaling, it will probably have no effect, but else Part of the code executes 
      //  Reason: Just mentioned scrollTop3 Pay attention to the yellow one 1 Article 
      //  Settings scrollTop Is less than the value of 0 Namely scrollTop Is set to 0
      //  You can zoom and run 1 Next, and then resume running 100% without refreshing 1 Next, then zoom and print scrollTop Value of 
      //  You will find the printed number when the normal size is executed 1 The value is not added, but subtracted, that is, scrollTop++ Increase negative value 
      //  In this way, it corresponds to scrollTop Note that the increased value is less than 0 Is set to 0
      parent.scrollTop++;
    }
  }, 20);
})()

The following is the complete demo. Take it away and see the effect directly 


<!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;
  }
  /* The height of the child box is higher than that of the parent box, resulting in overflow effect */
  .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>
Related articles: