如何自动滚动CSS溢出属性设置为auto的元素

rdlzhqv9  于 2023-05-02  发布在  其他
关注(0)|答案(2)|浏览(91)

我正在创建一个有两个我想然后div自动滚动，并保持在div的高度是固定的滚动证明部分
我不知道为什么，但是在我的代码中只有一个div移动，另一个没有。
我已经创建了一个div并应用了JavaScript用于自动滚动，但是JavaScript对第二个div不起作用。

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.scrollTop2 = 0;
  PreviousScrollTop2 = 0;

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

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

    ReachedMaxScroll2 =
      DivElmnt2.scrollTop2 >= DivElmnt2.scrollHeight2 - DivElmnt2.offsetHeight2;
  } else {
    ReachedMaxScroll2 = DivElmnt2.scrollTop2 == 0 ? false : true;

    DivElmnt2.scrollTop2 = PreviousScrollTop2;
    PreviousScrollTop2--;
  }
}

function pauseDiv2() {
  clearInterval(ScrollInterval2);
}

function resumeDiv2() {
  PreviousScrollTop2 = DivElmnt2.scrollTop2;
  ScrollInterval2 = setInterval("scrollDiv2()", ScrollRate2);
}
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-weight: bold; */
  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;

  /* height: 400px; */
}

.test-box-1 {
  /* -webkit-animation: test-box-1 36s linear infinite; */
  /* animation: test-box-1 36s linear infinite; */
  /* height: -webkit-fit-content; */
  /* height: fit-content; */
  overflow: auto;
  width: auto;
  height: 400px;
}

.test-box-2 {
  /* -webkit-animation: test-box-1 36s linear infinite; */
  /* animation: test-box-1 36s linear infinite; */
  /* height: -webkit-fit-content; */
  /* height: fit-content; */
  overflow: auto;
  width: auto;
  height: 400px;
}
<!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="" />
    <link rel="stylesheet" href="style.css" />
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
    />
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js"
    />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"
    />
  </head>
  <body onLoad="scrollDiv_init()" onLoad="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

2条答案

按热度按时间
wb1gzix0

wb1gzix01#

由于变量名和dulpicates的原因，有很多错误。但是在resume中，你不能在body标签上有两个onLoad属性，你也不能将scrollTop设置为var，它是相应元素的属性。

ScrollRate = 100;

function init() {
  scrollDiv_init();
  scrollDiv_init_2();
}

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 = DivElmnt2.scrollHeight - DivElmnt2.offsetHeight;
  PreviousScrollTop2 = DivElmnt2.scrollHeight - DivElmnt2.offsetHeight;

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

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

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

    DivElmnt2.scrollTop = PreviousScrollTop2;
    PreviousScrollTop2++;
  }
}

function pauseDiv2() {
  clearInterval(ScrollInterval2);
}

function resumeDiv2() {
  PreviousScrollTop2 = DivElmnt2.scrollTop;
  ScrollInterval2 = setInterval("scrollDiv2()", ScrollRate2);
}
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-weight: bold; */
  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;

  /* height: 400px; */
}

.test-box-1 {
  /* -webkit-animation: test-box-1 36s linear infinite; */
  /* animation: test-box-1 36s linear infinite; */
  /* height: -webkit-fit-content; */
  /* height: fit-content; */
  overflow: auto;
  width: auto;
  height: 400px;
}

.test-box-2 {
  /* -webkit-animation: test-box-1 36s linear infinite; */
  /* animation: test-box-1 36s linear infinite; */
  /* height: -webkit-fit-content; */
  /* height: fit-content; */
  overflow: auto;
  width: auto;
  height: 400px;
}
<!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="" />
    <link rel="stylesheet" href="style.css" />
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
    />
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js"
    />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"
    />
  </head>
  <body onLoad="init()">
    <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>
赞(0）分享  回复(0）举报  2023-05-02
unguejic

unguejic2#

ScrollRate = 50;

function scrollDiv_init() {
  DivElmnt = document.getElementById("MyDivName");
  DivElmntSecond = document.getElementById("MyDivName2");

  ReachedMaxScroll = false;
  ReachedMaxScrollSecond = false;

  DivElmnt.scrollTop = 0;
  DivElmntSecond.scrollTop = 0;

  PreviousScrollTop = 0;
  PreviousScrollTopSecond = 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--;
  }

  if (!ReachedMaxScrollSecond) {
    DivElmntSecond.scrollTop = PreviousScrollTopSecond;
    PreviousScrollTopSecond++;

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

    DivElmntSecond.scrollTop = PreviousScrollTopSecond;
    PreviousScrollTopSecond--;
  }
}

function pauseDiv() {
  clearInterval(ScrollInterval);
}

function resumeDiv() {
  PreviousScrollTop = DivElmnt.scrollTop;
  PreviousScrollTopSecond = DivElmntSecond.scrollTop;

  ScrollInterval = setInterval("scrollDiv()", ScrollRate);
}
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-weight: bold; */
  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;

  /* height: 400px; */
}

.test-box {
  /* -webkit-animation: test-box-1 36s linear infinite; */
  /* animation: test-box-1 36s linear infinite; */
  /* height: -webkit-fit-content; */
  /* height: fit-content; */
  overflow: auto;
  width: auto;
  height: 400px;
}

.test-box-2 {
  /* -webkit-animation: test-box-1 36s linear infinite; */
  /* animation: test-box-1 36s linear infinite; */
  /* height: -webkit-fit-content; */
  /* height: fit-content; */
  overflow: auto;
  width: auto;
  height: 400px;
}
<!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="" />
    <link rel="stylesheet" href="style.css" />
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
    />
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js"
    />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"
    />
  </head>
  <body onLoad="scrollDiv_init()" onLoad="scrollDiv_init()">
    <div class="container mt-5">
      <div class="test-main-box d-flex justify-content-center py-3">
        <div
          id="MyDivName"
          class="test-box 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 ml-2"
          onMouseOver="pauseDiv()"
          onMouseOut="resumeDiv()"
          style="overflow-y: scroll; scroll-behavior: reverse"
        >
          <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>

这段代码帮助我实现了我正在尝试的东西。

赞(0）分享  回复(0）举报  2023-05-02
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备2022004421号-2 NULL123 https://www.null123.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com