HTML 滚动问题（我想去掉按钮、水平选项，并保持对齐）

Question

我想要一个很酷的滚动效果来锁定页面上的每个 div id，但我不确定如何实现。这是它的样子 https://test.iamnotregis.repl.co/ -_-

我删除了 css，因为不需要它，但我仍然 link repl.it https://repl.it/@IAmNotRegis/test#index.html

上的项目

    <!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 样式确保捕捉魔术开始。

#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 滚动问题（我想去掉按钮、水平选项，并保持对齐）

HTML Scrolling Issue (I want to get rid of the buttons, horizontal option, and leave the snapping on)

html

javascript

css

scroll

scrollview