时间戳

首页 > 解决方案 > JS 自动滚动调整

javascript - JS 自动滚动调整

问题描述

我有这个第 3 方水平自动滚动脚本，它滚动数字序列供学生练习计数，并且我已经成功地拼凑了几个改变数字序列的文本链接，这已经突破了我的 JS 能力的极限。我想完成/解决三件事：

  1. 一个基本的问题是，无论滚动发生在哪里，新数字都会被激活，而不会中断滚动，如果它停止了（因为初始滚动事件已经完成），那么就是这样，什么都没有。每当单击这些文本链接之一以更改数字时，我都需要重置并重新激活滚动。这是我需要解决的最重要的事情。

  2. 如您所见，我有两个单独的脚本来容纳调用的两个更改。我不明白如何组合这些功能。

  3. 我非常想创建一组调整速度的 +/- 按钮。需要影响的相关代码是主脚本末尾的数字 17。

非常感谢，非常感谢！这是代码，它经过简化并且从根本上运行良好。

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <style>
        body {
            padding: 40px;
            font-size: 30px;
            line-height: 2em;
        }
        .container {
            width: 150px;
            overflow-x: scroll;
            white-space: nowrap;
            word-spacing: 30px;
        }
    </style>
</head>
    
    <body>
        <div class="container" id="flavoursContainer">
            <div id="the-numbers">1 2 3 4 5 6 7 8 9 10 11 12 13 14 15</div>
        </div>
        <div onclick="myFunction()">Change</div>
        <div onclick="test()">Change again</div>
        
        <script>
    const flavoursContainer = document.getElementById("flavoursContainer")
const flavoursScrollWidth = flavoursContainer.scrollWidth

window.addEventListener("load", () => {
  self.setInterval(() => {
    if (flavoursContainer.scrollLeft !== flavoursScrollWidth) {
      flavoursContainer.scrollTo(flavoursContainer.scrollLeft + 1, 0);
    }
  }, 17);
})
        </script>
        <script>
        function myFunction() {
  document.getElementById("the-numbers").innerHTML = "25 50 75 100 125 150 175 200";                
}
        </script>
        <script>
        function test() {
  document.getElementById("the-numbers").innerHTML = "11 21 31 41 51 61 71 81 91 101";              
}
        </script>
    </body>
</html>

标签： javascriptscrollautoscroll

解决方案

调用函数时只需将 scrollLeft 值重置为 0！

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <style>
      body {
        padding: 40px;
        font-size: 30px;
        line-height: 2em;
      }
      .container {
        width: 150px;
        overflow-x: scroll;
        white-space: nowrap;
        word-spacing: 30px;
      }
    </style>
  </head>

  <body>
    <div class="container" id="flavoursContainer">
      <div id="the-numbers">1 2 3 4 5 6 7 8 9 10 11 12 13 14 15</div>
    </div>
    <div onclick="myFunction()">Change</div>
    <div onclick="test()">Change again</div>

    <script>
      const flavoursContainer = document.getElementById("flavoursContainer");
      const flavoursScrollWidth = flavoursContainer.scrollWidth;

      window.addEventListener("load", () => {
        self.setInterval(() => {
          if (flavoursContainer.scrollLeft !== flavoursScrollWidth) {
            flavoursContainer.scrollTo(flavoursContainer.scrollLeft + 1, 0);
          }
        }, 17);
      });

      function myFunction() {
        flavoursContainer.scrollLeft = 0;
        document.getElementById("the-numbers").innerHTML =
          "25 50 75 100 125 150 175 200";
      }

      function test() {
        flavoursContainer.scrollLeft = 0;
        document.getElementById("the-numbers").innerHTML =
          "11 21 31 41 51 61 71 81 91 101";
      }
    </script>
  </body>
</html>

此外，如果您想让按钮调整滚动速度，请为滚动速度设置一个变量，并在单击按钮时调整它的值。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <style>
      body {
        padding: 40px;
        font-size: 30px;
        line-height: 2em;
      }
      .container {
        width: 150px;
        overflow-x: scroll;
        white-space: nowrap;
        word-spacing: 30px;
      }
    </style>
  </head>

  <body>
    <div class="container" id="flavoursContainer">
      <div id="the-numbers">1 2 3 4 5 6 7 8 9 10 11 12 13 14 15</div>
    </div>
    <div onclick="myFunction()">Change</div>
    <div onclick="test()">Change again</div>
    <button onclick="decreaseSpeed()">-</button>
    <button onclick="increaseSpeed()">+</button>

    <script>
      const flavoursContainer = document.getElementById("flavoursContainer");
      const flavoursScrollWidth = flavoursContainer.scrollWidth;
      let speed = 1;

      window.addEventListener("load", () => {
        self.setInterval(() => {
          if (flavoursContainer.scrollLeft !== flavoursScrollWidth) {
            flavoursContainer.scrollTo(flavoursContainer.scrollLeft + speed, 0);
          }
        }, 17);
      });

      function myFunction() {
        flavoursContainer.scrollLeft = 0;
        document.getElementById("the-numbers").innerHTML =
          "25 50 75 100 125 150 175 200";
      }

      function test() {
        flavoursContainer.scrollLeft = 0;
        document.getElementById("the-numbers").innerHTML =
          "11 21 31 41 51 61 71 81 91 101";
      }

      function increaseSpeed() {
        speed++;
      }
      function decreaseSpeed() {
        if (speed > 1) {
          speed--;
        }
      }
    </script>
  </body>
</html>

推荐阅读