CSS-上下滑动翻页效果

效果展示

代码

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>Documenttitle>
  head>
  body>
    div class="hero">
      h1> 人物介绍 h1>
      div class="review-box">
        div id="slide">
          div class="card">
            div class="profile">
              img src="/image/pic1.jpg" />
              div>
                h3>Phoenixh3>
                p>Web Designerp>
              div>
            div>
            p>
              The designer sat at their desk, surrounded by sketches and color
              swatches. They carefully crafted each line and curve, choosing
              just the right hue to bring their vision to life. With a steady
              hand and a sharp eye, they transformed blank pages into beautiful
              works of art.
            p>
          div>
          div class="card">
            div class="profile">
              img src="image/pic2.jpg" />
              div>
                h3>Steve McCurryh3>
                p>UI/UX Designerp>
              div>
            div>
            h3>
              The designer sat at their desk, surrounded by sketches and color
              swatches. They carefully crafted each line and curve, choosing
              just the right hue to bring their vision to life. With a steady
              hand and a sharp eye, they transformed blank pages into beautiful
              works of art.
            h3>
          div>
          div class="card">
            div class="profile">
              img src="image/pic3.jpg" />
              div>
                h3>Merlin Nauvenh3>
                p>Web Designerp>
              div>
            div>
            p>
              The designer sat at their desk, surrounded by sketches and color
              swatches. They carefully crafted each line and curve, choosing
              just the right hue to bring their vision to life. With a steady
              hand and a sharp eye, they transformed blank pages into beautiful
              works of art.
            p>
          div>
          div class="card">
            div class="profile">
              img src="image/pic4.jpg" />
              div>
                h3>John Williamsh3>
                p>Web Designerp>
              div>
            div>
            p>
              The designer sat at their desk, surrounded by sketches and color
              swatches. They carefully crafted each line and curve, choosing
              just the right hue to bring their vision to life. With a steady
              hand and a sharp eye, they transformed blank pages into beautiful
              works of art.
            p>
          div>
        div>
        div class="sidebar">
          
          div id="upArrow">↑div>
          div id="downArrow">↓div>
        div>
          
          
        div>
      div>
    div>
    script>
      var slide = document.getElementById('slide')
      var upArrow = document.getElementById('upArrow')
      var downArrow = document.getElementById('downArrow')

      let x = 0

      upArrow.onclick = function () {
        if (x  0) {
          x = x + 300
          slide.style.top = x + 'px'
        }
      }
      downArrow.onclick = function () {
        if (x > -900) {
          x = x - 300
          slide.style.top = x + 'px'
        }
      }
    script>
  body>
html>
style>
  * {
    padding: 0;
    margin: 0;
    font-family: sans-serif;
  }

  .hero {
    width: 100%;
    height: 100vh;
    background: #f6fbff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  h1 {
    font-size: 30px;
    position: relative;
    margin-bottom: 60px;
  }

  h1::after {
    content: '';
    width: 150px;
    height: 3px;
    background: linear-gradient(to right, #0780ed, #9f4db5);
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
  }

  .review-box {
    width: 90%;
    max-width: 700px;
    height: 300px;
    border-radius: 10px;
    box-shadow: -10px 10px 40px rgba(0, 0, 0, 0.25);
    position: relative;
    overflow: hidden;
  }
  #upArrow {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #fff;
    text-align: center;
    line-height: 30px;
    cursor: pointer;
  }
  #downArrow {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #fff;
    text-align: center;
    line-height: 30px;
    cursor: pointer;
  }
  .card {
    height: 300px;
    padding: 40px;
    color: #111;
    line-height: 22px;
    box-sizing: border-box;
    background: #fff;
    position: relative;
  }

  .profile {
    display: flex;
    align-items: center;
    margin-bottom: 40px;
  }

  .profile img {
    width: 70px;
    border-radius: 50%;
    margin-right: 20px;
  }

  .profile h3 {
    font-size: 26px;
    color: #0780ed;
    margin-bottom: 8px;
  }

  #slide {
    width: 100%;
    padding-right: 60px;
    box-sizing: border-box;
    position: absolute;
    top: 0;
    left: 0;
    transition: 0.5s;
  }

  .sidebar {
    width: 60px;
    height: 100%;
    padding: 15px 0;
    box-sizing: border-box;
    background: #0780ed;
    position: absolute;
    right: 0;
    top: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
  }

  .sidebar img {
    width: 25px;
    padding: 5px;
    background: #fff;
    border-radius: 50%;
    cursor: pointer;
  }
style>

Tips：觉得有用的话点个关注呦，会分享更多“有用”的前端 tips