使用JavaScript / CSS快速滚动滚动

Question

我需要深入了解Scroll Snap和你的帮助。

我需要达到3种效果：

• 能够拖延

• 能够顺利滚动到锚点

• 能够触发一个简单的动画，例如在内容被快照时更改颜色

您可以使用CSS / JavaScript / jQuery / etc ...来实现所需的效果。这是迄今为止没有结果的片段：

        a, span {
            position: absolute
        }

        h1 {
            font-size: 40px;
        }

        .child {
            width: 400px;
            height: 400px;
            position: relative;
            background-color: #F0F0F0;
            display: inline-block;
            margin-right: -4px;
            border: 1px solid black;
        }

        .label {
            width: 200px;
            height: 200px;
            border-radius: 25%;
            background-color: white;
            margin: 100px auto 0 auto;
        }

        .label > h1 {
            font-size: 80px;
            padding-left: calc(50% - 22px);
            padding-top: calc(50% - 60px);
        }

        .container {
            width: 402px;
            height: 410px;
            overflow-x: auto;
            overflow-y: hidden;
            white-space: nowrap;
            -webkit-overflow-scrolling: touch;
            margin: 10vh auto 0 auto;
        }

#snap-scroll-container {
            -webkit-scroll-snap-type: mandatory;
            scroll-snap-type: mandatory;
            -webkit-scroll-snap-points-x: repeat(100%);
            scroll-snap-points-x: repeat(100%);
        }

<div class="container" id="snap-scroll-container">
  <div class="child">
    <div class="label">
      <h1>1</h1>
      <a href="#3">I must smooth scroll to 3!</a>
    </div>
  </div>
  <div class="child">
    <div class="label">
      <h1>2</h1>
      <span>I must change color when snaps!</span>
    </div>
  </div>
  <div id="3" class="child">
    <div class="label">
      <h1>3</h1>
      <span>Scroll must be draggable too!</span>
    </div>
  </div>
</div>

非常感谢您的帮助！