scrollIntoView() 打开可折叠元素时

问题描述 投票：0回答：1

我正在创建一个带有可折叠元素的网站，单击该元素时，该元素会展开到视图之外。我想让页面向下滚动，这样你就可以看到它打开的内容，但似乎无法工作......

这是我的代码：在codepen上

我尝试了一些在网上找到的解决方案，但似乎没有任何区别。

这是我的第一个项目，我想使用纯 javascript，因为我还不熟悉 jQuery 或 React。

<button class="pigment row g-0" type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleFooter" aria-expanded="false" aria-controls="collapsibleFooter">
    <h1>Pigment Hotel</h1>
</button>

<footer class="collapse" id="collapsibleFooter">

    <div class="row row-cols-1 row-cols-sm-2">
        <div class="text-center contact">
            <h2>CONTACT US</h2>
            <h3><i class="bi bi-telephone-fill"></i>+45 4545 4545</h3>
            <h3><i class="bi bi-instagram"></i><a href="instagram.com" class="text-decoration-none"> Pigment Hotel</a></h3>
            <h3><i class="bi bi-facebook"></i><a href="facebook.com" class="text-decoration-none"> Pigment Hotel</a></h3>
            <h3><i class="bi bi-envelope"></i><a href="mailto:[email protected]" class="text-decoration-none"> [email protected]</a></h3>
            <h2>ABOUT US</h2>
            <h3><a href="rest.html" class="text-decoration-none">Rest</a></h3>
            <h3><a href="train.html" class="text-decoration-none">Train</a></h3>
            <h3><a href="eat.html" class="text-decoration-none">Eat</a></h3>
            <h3><a href="relax.html" class="text-decoration-none">Relax</a></h3>
        </div>
        <div class="text-center findus">
            <h2>FIND US</h2>
            <h3>Vesterbrogade 41</h3>
            <h3>1620 København V</h3>
            <img src="hotel.jpg" class="hotelimage img-fluid" alt="photograph of the hotel seen from the street">
        </div>
    </div>
    <h3 class="col-12 text-center pigmenthotel2024">Pigment Hotel 2024</h3>

    <div class="row row-cols-1 row-cols-sm-4">
                      
</footer>

const element = document.getElementById("collapsibleFooter");
pigment.addEventListener("click", (event) => {
  element.scrollIntoView();
  element.scrollIntoView(false);
  element.scrollIntoView({ block: "end" });
  element.scrollIntoView({ behavior: "smooth", block: "end", inline: "nearest" });
});
javascript button scroll collapsable js-scrollintoview
1个回答
0
投票

您的 JavaScript 代码中可以观察到几个问题：

  • pigment
    变量尚未定义。必须引用已定义变量。
  • 即使定义了 
    pigment
    变量 was，在元素“足够”可见之前，
    .scrollIntoView()
    也被调用得太早了
  • 您似乎多次拨打
    .scrollIntoView()
    。考虑只使用您想要的选项调用一次。

由于您想在显示时滚动到可折叠元素，请考虑监听 

show.bs.collapse
，一旦元素完全显示，Bootstrap 将在该元素上触发，然后滚动到视图中：

const element = document.getElementById("collapsibleFooter");
element.addEventListener("shown.bs.collapse", (event) => {
  element.scrollIntoView({
    behavior: "smooth",
    block: "end",
    inline: "nearest"
  });
});
body {
  color: white;
  background-color: #f0f0f0;
  margin: 0;
  padding: 0;
  /* overflow: hidden; */
}

#half {
  font-family: 'Raleway', sans-serif;
}

.row {
  width: auto;
  padding: 0;
  margin: 0;
}

.rest {
  height: 25vh;
  background-color: #ff4d00;
  position: relative;
}

.rest h1 {
  font-size: 4rem;
  color: #FF7D6C;
  position: absolute;
  bottom: -10px;
  right: 20px;
}

.rest:hover>#resttext {
  font-size: 12vw;
  ;
}

.train {
  height: 45vh;
  background-color: #090081;
  position: relative;
}

.train h1 {
  font-size: 4rem;
  color: #ff4d00;
  position: absolute;
  top: 0px;
  right: 10px;
  display: inline;
}

.train:hover>#traintext {
  font-size: 12vw;
}

.eat {
  height: 45vh;
  background-color: #795CA8;
  position: relative;
}

.eat h1 {
  font-size: 4rem;
  color: #DEDE00;
  writing-mode: vertical-rl;
  text-orientation: sideways-right;
  position: absolute;
  bottom: 10px;
  right: 0px;
  margin: 0;
  display: inline;
}

.eat:hover>#eattext {
  font-size: 12vw;
}

.relax {
  height: 70vh;
  background-color: #FF7D6C;
  position: relative;
}

.relax h1 {
  font-size: 4rem;
  color: #E8B8CE;
  position: absolute;
  bottom: -10px;
  right: 10px;
}

.relax:hover>#relaxtext {
  font-size: 12vw;
}

.pigment {
  text-align: center;
  height: 30vh;
  background-color: #E8B8CE;
  width: 100%;
  border: none;
  margin: 0;
  padding: 0;
  padding-block: 0;
  padding-inline: 0;
}

.pigment h1 {
  font-family: 'Raleway', sans-serif;
  font-weight: lighter;
  font-size: 12vw;
  vertical-align: middle;
  color: #090081;
  margin: 0;
  position: relative;
  top: 50%;
  transform: translateY(-50%)
}

footer {
  /* height: 530px; */
  background-color: #E8B8CE;
  font-family: 'Raleway', sans-serif;
  color: #090081;
}

footer h2 {
  font-size: 20px;
  margin-top: 50px;
  margin-bottom: 40px;
}

footer h3 {
  font-size: 13px;
}

footer a {
  color: #090081;
}

.hotelimage {
  /* width: 25vw; */
  width: 250px;
  height: auto;
  margin-bottom: 50px;
}

@media screen and (max-width: 576px) {
  /* body {
      overflow:auto ;
    } */
  .rest {
    height: 25vh;
  }
  .train {
    width: 50vw;
    height: 25vh;
  }
  .eat {
    width: 50vw;
    height: 25vh;
  }
  .relax {
    height: 25vh;
  }
  .pigment {
    height: 25vh;
  }
  .pigment h1 {
    font-size: 15vw;
  }
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Passions+Conflict&family=Raleway:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="style.css">
  <title>Pigment Paradise Hotel</title>
</head>

<body>
  <div id="navigation">

    <div id="half" class="col block-contain">

      <div class="row g-0" id="row1">

        <div class="col-12 col-sm-8">

          <div class="row">

            <a href="rest.html" class="col-12 rest">
              <h1 id="resttext">rest</h1>
            </a>

          </div>

          <div class="row g-0">

            <a href="train.html" class="d-inline col-12 col-sm-8 train">
              <h1 id="traintext">train</h1>
            </a>


            <a href="eat.html" class="d-inline col-12 col-sm-4 eat">
              <h1 id="eattext">eat</h1>
            </a>

          </div>

        </div>

        <a href="relax.html" class="col-12 col-sm-4 relax">
          <h1 id="relaxtext">relax</h1>
        </a>

      </div>

    </div>

    <!-- <div class="row g-0" id="row2"> -->

    <button class="pigment row g-0" type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleFooter" aria-expanded="false" aria-controls="collapsibleFooter">
                    <h1>Pigment Hotel</h1>
                </button>

    <!-- </div>     -->

  </div>


  </div>




  <footer class="collapse" id="collapsibleFooter">

    <div class="row row-cols-1 row-cols-sm-2">
      <div class="text-center contact">
        <h2>CONTACT US</h2>
        <h3><i class="bi bi-telephone-fill"></i>+45 4545 4545</h3>
        <h3><i class="bi bi-instagram"></i><a href="instagram.com" class="text-decoration-none"> Pigment Hotel</a></h3>
        <h3><i class="bi bi-facebook"></i><a href="facebook.com" class="text-decoration-none"> Pigment Hotel</a></h3>
        <h3><i class="bi bi-envelope"></i><a href="mailto:[email protected]" class="text-decoration-none"> [email protected]</a></h3>
        <h2>ABOUT US</h2>
        <h3><a href="rest.html" class="text-decoration-none">Rest</a></h3>
        <h3><a href="train.html" class="text-decoration-none">Train</a></h3>
        <h3><a href="eat.html" class="text-decoration-none">Eat</a></h3>
        <h3><a href="relax.html" class="text-decoration-none">Relax</a></h3>
      </div>
      <div class="text-center findus">
        <h2>FIND US</h2>
        <h3>Vesterbrogade 41</h3>
        <h3>1620 København V</h3>
        <img src="hotel.jpg" class="hotelimage img-fluid" alt="photograph of the hotel seen from the street">
      </div>
    </div>
    <h3 class="col-12 text-center pigmenthotel2024">Pigment Hotel 2024</h3>

    <div class="row row-cols-1 row-cols-sm-4">



  </footer>



  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
  <script src="script.js"></script>
</body>

</html>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.