使用JavaScript/CSS进行深度捕捉滚动

我需要滚动快照和您的帮助深入了解

我需要实现3个效果：

• 可拖动

• 能够平滑地滚动到锚点

• 能够触发一个简单的动画，比如在内容被抓拍时改变颜色

您可以使用CSS/JavaScript/jQuery/etc。。。以达到预期的效果。以下是到目前为止没有结果的片段：

a，span{
位置：绝对位置
}
h1{
字体大小：40px；
}
.孩子{
宽度：400px；
高度：400px；
位置：相对位置；
背景色：#f0；
显示：内联块；
右边距：-4px；
边框：1px纯黑；
}
.标签{
宽度：200px；
高度：200px；
边界半径：25%；
背景色：白色；
保证金：100px自动0自动；
}
.标签>h1{
字号：80px；
左侧填充：计算（50%-22px）；
填料顶部：钙（50%-60px）；
}
.集装箱{
宽度：402px；
高度：410像素；
溢出-x：自动；
溢出y：隐藏；
空白：nowrap；
-webkit溢出滚动：触摸；
裕度：10vh自动0自动；
}
#快速滚动容器{
-webkit滚动捕捉类型：必填；
滚动捕捉类型：必填；
-webkit-scroll-snap-points-x：重复（100%）；
滚动捕捉点x：重复（100%）；
}

1.
2.
拍照时我必须改变颜色！
3.
卷轴也必须是可拖动的！