时间戳

首页 > 解决方案 > Scroll Snap Over 滚动

html - Scroll Snap Over 滚动

问题描述

当我在 Chrome 的网页上启用滚动捕捉滚动时；它滚动，也就是说，它不会停止滚动。我的鼠标滚轮很好，我的 chrome 是最新的。它在 Firefox 中按预期工作，但在 Chrome 和 opera 等 webkit 浏览器上却没有。

html {
  scroll-snap-type: y mandatory;
  scroll-snap-stop: always;
}

::-webkit-scrollbar {
  width: 0.5em;
}

::-webkit-scrollbar-track {
  background-color: rgba(0, 0, 0, 0.7);
}

::-webkit-scrollbar-thumb {
  background-color: rgba(190, 190, 190, 0.5);
}

body {
  font-family: "Montserrat", sans-serif;
  margin: 0;
  height: 100vh;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  overscroll-behavior: none;
}

section {
  height: calc(100vh - 14em);
  width: calc(100% - 14em);
  padding: 7em;
  color: white;
  scroll-snap-align: start;
}

section:nth-of-type(1) {
  background-color: rgb(96, 175, 21);
}

section:nth-of-type(2) {
  background-color: rgb(21, 139, 175);
}

section:nth-of-type(3) {
  background-color: rgb(175, 21, 129);
}

section h3 {
  font-size: 3em;
}

section p {
  font-size: 1.2em;
}
<body>
  <section>
    <h3>A subtitle lives here</h3>
    <p>
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Animi suscipit, nulla, totam eveniet molestiae odit cupiditate accusamus illum voluptatem quibusdam voluptates vitae! Maiores numquam incidunt recusandae exercitationem at magni atque.
    </p>
  </section>
  <section>
    <h3>A subtitle lives here</h3>
    <p>
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Animi suscipit, nulla, totam eveniet molestiae odit cupiditate accusamus illum voluptatem quibusdam voluptates vitae! Maiores numquam incidunt recusandae exercitationem at magni atque.
    </p>
  </section>
  <section>
    <h3>A subtitle lives here</h3>
    <p>
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Animi suscipit, nulla, totam eveniet molestiae odit cupiditate accusamus illum voluptatem quibusdam voluptates vitae! Maiores numquam incidunt recusandae exercitationem at magni atque.
    </p>
  </section>
</body>

标签： htmlcssscroll-snap

解决方案

推荐阅读