HTML 滾動問題（我想擺脫按鈕，水平選項，並保持對齊）

Question

我想要一個很酷的滾動效果來鎖定頁面上的每個 div id，但我不知道該怎么做。 這是它的樣子https://test.iamnotregis.repl.co/ -_-

我刪除了 css 因為它不是必需的，但我仍然會在 repl.it 上鏈接項目https://repl.it/@IAmNotRegis/test#index.ZFC35FDC70D5FC69D269883A822C7A

    <!DOCTYPE html>
    <html>
    <body>
      <!-- Load user defined styles -->
      <link href="style.css" rel="stylesheet" type="text/css" />
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width">
      <script src="script.js"></script>

    <div id="carousel" class="snap">
      <div id="carousel-1">Item 1<br>Start scrolling ...</div>
      <div id="carousel-2">Item 2</div>
      <div id="carousel-3">Item 3</div>
    </div>

    <div id="controls">
      <button onclick="toggleSnap()">Turn Snapping <span id="otherSnappingState">off</span></button>
      <button onclick="toggleDirection()">Change scroll to <span id="otherScrollState">vertical</span></button>
    </div>

    </body>
    </html>

    function toggleSnap() {
      var snapEnabled = document.getElementById('carousel').classList.toggle('snap');
      document.getElementById('otherSnappingState').innerText = snapEnabled ? 'off' : 'on';
    }

    function toggleDirection() {
      var isVertical = document.getElementById('carousel').classList.toggle('vertical');
      document.getElementById('otherScrollState').innerText = isVertical 
    }

    #carousel {
      /* Ensure that the contents flow horizontally */
      overflow-x: auto;
      white-space: nowrap;
      display: flex;
    }

    #carousel.vertical {
      flex-direction: column;
    }

    /* 2018 spec - For Safari 11, Chrome 69+ */
    #carousel.snap {
      scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch; /* Needed to work on iOS Safari */
    }

    #carousel.snap > div {
      scroll-snap-align: center;
    }

    #carousel.snap.vertical {
      flex-direction: column;
      scroll-snap-type: y mandatory;
    }



    /* 2015 spec - For Firefox, Edge, IE */
    #carousel.snap {
      scroll-snap-type: mandatory;
      -ms-scroll-snap-type: mandatory;
      scroll-snap-points-x: repeat(100%);
      -ms-scroll-snap-points-x: repeat(100%);
    }

    #carousel.snap.vertical {
      scroll-snap-points-x: initial;
      -ms-scroll-snap-points-x: initial;
      scroll-snap-points-y: repeat(100%);
      -ms-scroll-snap-points-y: repeat(100%);
    }

Answer 1

從 index.html 中刪除“控件”div

<!DOCTYPE html>
    <html>
    <body>
      <!-- Load user defined styles -->
      <link href="style.css" rel="stylesheet" type="text/css" />
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width">
      

    <div id="carousel" class="snap">
      <div id="carousel-1">Item 1<br>Start scrolling ...</div>
      <div id="carousel-2">Item 2</div>
      <div id="carousel-3">Item 3</div>
    </div>


    </body>
    </html>

您不再需要的 javascript 函數 toggleSnap() 和 toggleDirection() 也可以刪除。

但是 styles.css 文件是強制性的。 CSS styles 確保快速啟動。

#carousel {
  /* Ensure that the contents flow horizontally */
  overflow-x: auto;
  white-space: nowrap;
  display: flex;
}

#carousel.vertical {
  flex-direction: column;
}

/* 2018 spec - For Safari 11, Chrome 69+ */
#carousel.snap {
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch; /* Needed to work on iOS Safari */
}

#carousel.snap > div {
  scroll-snap-align: center;
}

#carousel.snap.vertical {
  flex-direction: column;
  scroll-snap-type: y mandatory;
}



/* 2015 spec - For Firefox, Edge, IE */
#carousel.snap {
  scroll-snap-type: mandatory;
  -ms-scroll-snap-type: mandatory;
  scroll-snap-points-x: repeat(100%);
  -ms-scroll-snap-points-x: repeat(100%);
}

#carousel.snap.vertical {
  scroll-snap-points-x: initial;
  -ms-scroll-snap-points-x: initial;
  scroll-snap-points-y: repeat(100%);
  -ms-scroll-snap-points-y: repeat(100%);
}


/* Below here is styling, not important for the actual example, just to make it look nice. No need to look down here! */

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#carousel {
  position: relative;
  width: 100%;
  height: 100%;
}

#carousel > div {
  min-width: 100%;
  min-height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: #fff;
  font-size: 20px;
}

#carousel-1 {
  background-color: #e34747;
}

#carousel-2 {
  background-color: #5ab92c;
}

#carousel-3 {
  background-color: #226de2;
}

#controls {
  position: fixed;
  bottom: 10px;
  left: 10px;
}

#controls button {
  padding: 5px 10px;
}

如果您希望它垂直滾動，請將 class“垂直”名稱添加到“輪播”div 中。

<div id="carousel" class="snap vertical">

HTML 滾動問題（我想擺脫按鈕，水平選項，並保持對齊）

問題描述

1 個解決方案

解決方案1
1 已采納 2021-01-09 01:51:51

HTML 滾動問題（我想擺脫按鈕，水平選項，並保持對齊）

問題描述

1 個解決方案

解決方案1 1 已采納 2021-01-09 01:51:51

解決方案1
1 已采納 2021-01-09 01:51:51