小编Dan*_*ith的帖子

CSS 部分滚动对齐

一直在尝试滚动捕捉,看起来用 JS 编写功能可以省去很多麻烦。

这是一个挑战,有没有人找到一种方法来选择性地选择要捕捉哪些子项以及要自由滚动哪些子项?

我认为这对于内容丰富的页面非常有用,这些页面包含无法从滚动捕捉中受益的部分。

这是问题的示例: https://codepen.io/nodelondon/pen/YzxWqLG

html {
  background: #f2f2f2;
}

.scroll-container,
.scroll-area-none,
.scroll-area {
  max-width: 850px;
  height: 600px;
  font-size: 60px;
}

.scroll-area-none {
  scroll-snap-align: none;
  background-color: black;
}

.scroll-container {
  overflow: auto;
  scroll-snap-type: y mandatory;
}

.scroll-area {
  scroll-snap-align: start;
}

.scroll-container,
.scroll-area-none,
.scroll-area {
  margin: 0 auto;
}

.scroll-area-none,
.scroll-area {
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

.scroll-area:nth-of-type(4n+1) {
  background: #49b293;
}

.scroll-area:nth-of-type(4n+2) {
  background: #c94e4b;
}

.scroll-area:nth-of-type(4n+3) {
  background: #4cc1be;
}

.scroll-area:nth-of-type(4n+4) { …
Run Code Online (Sandbox Code Playgroud)

html javascript css scroll scroll-snap

6
推荐指数
1
解决办法
1599
查看次数

标签 统计

css ×1

html ×1

javascript ×1

scroll ×1

scroll-snap ×1