如何实现CSS overflow:auto元素自动滚动？双div滚动异常解决

开发客户评价板块时，两个固定高度、overflow:auto的div仅一个能自动滚动，另一个无效果。原代码中第二个div的滚动逻辑未生效，以下是问题分析和修复方案：

错误原因 #

1. HTML初始化冲突：<body>标签重复设置onLoad属性，浏览器只会执行最后一个，导致第二个div的初始化函数scrollDiv_init_2()未被调用。
2. JS属性误用：第二个div的滚动逻辑中错误使用了scrollTop2、scrollHeight2、offsetHeight2这类不存在的DOM属性，正确属性应为scrollTop、scrollHeight、offsetHeight。

修复后的完整代码 #

HTML部分 #

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="style.css" />
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" />
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  </head>
  <body onLoad="scrollDiv_init();scrollDiv_init_2()">
    <div class="container mt-5">
      <div class="test-main-box d-flex justify-content-center py-3">
        <div
          id="MyDivName"
          class="test-box-1 mr-2"
          onMouseOver="pauseDiv()"
          onMouseOut="resumeDiv()"
        >
          <div class="t-card">
            <div class="px-2 py-2">
              <span class="maintxt"
                >"Lorem ipsum dolor sit amet,consectetur adipiscing elit, sed do
                eiusmod tempor incididunt ut labore magna aliqua."</span
              >
              <div class="d-flex pt-3">
                <div>
                  <img
                    src="https://i.imgur.com/hczKIze.jpg"
                    width="50"
                    class="rounded-circle"
                  />
                </div>
                <div class="ml-2">
                  <span class="name">Dan Spratling</span>
                  <p class="para">Company name</p>
                </div>
              </div>
            </div>
          </div>

          <div class="t-card mt-3">
            <div class="px-2 py-2">
              <span class="maintxt"
                >"Lorem ipsum dolor sit amet,consectetur adipiscing elit."</span
              >
              <div class="d-flex pt-3">
                <div>
                  <img
                    src="https://i.imgur.com/hczKIze.jpg"
                    width="50"
                    class="rounded-circle"
                  />
                </div>
                <div class="ml-2">
                  <span class="name">Dan Spratling</span>
                  <p class="para">Company name</p>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div
          id="MyDivName2"
          class="test-box-2 ml-2"
          onMouseOver="pauseDiv2()"
          onMouseOut="resumeDiv2()"
        >
          <div class="t-card">
            <div class="px-2 py-2">
              <span class="maintxt"
                >"Lorem ipsum dolor sit amet,consectetur adipiscing elit."</span
              >
              <div class="d-flex pt-3">
                <div>
                  <img
                    src="https://i.imgur.com/hczKIze.jpg"
                    width="50"
                    class="rounded-circle"
                  />
                </div>
                <div class="ml-2">
                  <span class="name">Dan Spratling</span>
                  <p class="para">Company name</p>
                </div>
              </div>
            </div>
          </div>

          <div class="t-card mt-3">
            <div class="px-2 py-2">
              <span class="maintxt"
                >"Lorem ipsum dolor sit amet,consectetur adipiscing elit, sed do
                eiusmod tempor incididunt ut labore magna aliqua."</span
              >
              <div class="d-flex pt-3">
                <div>
                  <img
                    src="https://i.imgur.com/hczKIze.jpg"
                    width="50"
                    class="rounded-circle"
                  />
                </div>
                <div class="ml-2">
                  <span class="name">Dan Spratling</span>
                  <p class="para">Company name</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <script src="script.js"></script>
  </body>
</html>

CSS部分 #

body {
  /* background-color: #ffffff; */
}
.container {
  /* background-color: #ffffff; */
  width: 600px;
}
.t-card {
  width: 250px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  border-radius: 23px;
  background-color: #faf7f5;
  padding: 5%;
  font-family: "Poppins", sans-serif;
}
.maintxt {
  color: #1f1f1f;
  font-weight: 500;
  font-size: 16px;
  font-weight: 400;
  font-family: "Poppins", sans-serif;
  font-size: 16px;
}
.name {
  color: #000;
  font-size: 18px;
  font-family: "Poppins", sans-serif;
  font-style: normal;
  font-weight: 600;
}
.para {
  color: #8c8c8c;
  font-size: 16px;
  position: relative;
  bottom: 3px;
  font-family: "Poppins", sans-serif;
  font-style: normal;
  font-weight: 500;
}

.test-main-box {
  height: 400px;
}

.test-box-1 {
  overflow: auto;
  width: auto;
  height: 400px;
}

.test-box-2 {
  overflow: auto;
  width: auto;
  height: 400px;
}

JavaScript部分 #

ScrollRate = 100;

function scrollDiv_init() {
  DivElmnt = document.getElementById("MyDivName");
  ReachedMaxScroll = false;

  DivElmnt.scrollTop = 0;
  PreviousScrollTop = 0;

  ScrollInterval = setInterval("scrollDiv()", ScrollRate);
}

function scrollDiv() {
  if (!ReachedMaxScroll) {
    DivElmnt.scrollTop = PreviousScrollTop;
    PreviousScrollTop++;

    ReachedMaxScroll =
      DivElmnt.scrollTop >= DivElmnt.scrollHeight - DivElmnt.offsetHeight;
  } else {
    ReachedMaxScroll = DivElmnt.scrollTop == 0 ? false : true;

    DivElmnt.scrollTop = PreviousScrollTop;
    PreviousScrollTop--;
  }
}

function pauseDiv() {
  clearInterval(ScrollInterval);
}

function resumeDiv() {
  PreviousScrollTop = DivElmnt.scrollTop;
  ScrollInterval = setInterval("scrollDiv()", ScrollRate);
}

ScrollRate2 = 100;

function scrollDiv_init_2() {
  DivElmnt2 = document.getElementById("MyDivName2");
  ReachedMaxScroll2 = false;

  DivElmnt2.scrollTop = 0;
  PreviousScrollTop2 = 0;

  ScrollInterval2 = setInterval("scrollDiv2()", ScrollRate2);
}

function scrollDiv2() {
  if (!ReachedMaxScroll2) {
    DivElmnt2.scrollTop = PreviousScrollTop2;
    PreviousScrollTop2++;

    ReachedMaxScroll2 =
      DivElmnt2.scrollTop >= DivElmnt2.scrollHeight - DivElmnt2.offsetHeight;
  } else {
    ReachedMaxScroll2 = DivElmnt2.scrollTop == 0 ? false : true;

    DivElmnt2.scrollTop = PreviousScrollTop2;
    PreviousScrollTop2--;
  }
}

function pauseDiv2() {
  clearInterval(ScrollInterval2);
}

function resumeDiv2() {
  PreviousScrollTop2 = DivElmnt2.scrollTop;
  ScrollInterval2 = setInterval("scrollDiv2()", ScrollRate2);
}

内容的提问来源于stack exchange，提问作者Ayush Kumar