锚点css动态滚动_使用CSS滚动捕捉点制作动态投资组合

锚点css动态滚动

Traditionally this problem was solved with JavaScript (usually in a framework such as JQuery), but the same functionality is now built into CSS, via Scrolling Snap Points (current draft).

传统上，这个问题是使用JavaScript解决的(通常是在诸如JQuery之类的框架中 )，但是现在通过Scrolling Snap Points (当前草稿)将相同的功能内置到CSS中 。

这个概念 (The Concept)

Let’s say we have a series of images arranged vertically in a container. In this case, the container is a <figure> element which is further wrapped inside a <div>:

假设我们在容器中垂直排列了一系列图像 。 在这种情况下，容器是一个<figure>元素，该元素进一步包装在<div> ：

<div id="scrollcontainer">
    <figure>    
        <img src="floating-2x.jpg" alt>
        <img src="jellyfish-2x.jpg" alt>
        <img src="silk-2x.jpg" alt>
        <img src="the-deep-2x.jpg" alt>
    </figure>
</div>

alt values have been left blank in this example to save on space; they would be completed in the production version).

在此示例中， alt值保留为空白以节省空间。 它们将在生产版本中完成)。

The outer <div> has been sized to fit around just one image exactly using the standard technique of employing relative and absolute positioning to preserve an intrinsic aspect ratio:

使用标准技术将外部<div>大小调整为恰好适合一幅图像，该技术采用相对和绝对定位来保持固有的宽高比：

#scrollcontainer {
    font-size: 0;
    position: relative;
    padding-top: 66%;
}
#scrollcontainer figure { 
    margin: 0;
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
}

While the figure element is set to the height of its container, the other images will continue to show beyond the bounding area of the box, since web pages won’t hide ] content by default, even if it overflows a container. To change that behaviour, we must set the overflow property of the figure:

将figure元素设置为其容器的高度时，其他图像将继续显示超出框的边界区域，因为默认情况下网页不会隐藏]内容，即使该内容溢出了容器也是如此。 要更改该行为，我们必须设置figure的overflow属性：

#scrollcontainer figure { 
    overflow: auto;
}

Now the container scrolls up and down, but can stop at any point, including halfway between two pictures; we want a scroll or swipe behaviour to “snap” the image column to the nearest photo.

现在容器可以上下滚动，但是可以停在任何位置，包括两张图片之间的中间位置； 我们希望通过滚动或滑动行为将图像列“捕捉”到最近的照片。

CSS滚动捕捉点 (CSS Scrolling Snap Points)

To start, we must set the scroll-snap-type on the container:

首先，我们必须在容器上设置scroll-snap-type ：

#scrollcontainer figure 
    scroll-snap-type: mandatory;
}

The mandatory value means that the container must come to rest at a scroll snap point after a scroll or swipe behaviour. There is also a proximity value, which means that snapping will only occur if the current position is sufficiently close to a snap point (proximity is not yet supported in most browsers, as of this writing).

mandatory值表示在滚动或滑动行为之后，容器必须停在滚动捕捉点。 还有一个proximity值，这意味着只有在当前位置足够接近捕捉点时才会发生捕捉(在撰写本文时，大多数浏览器尚不支持proximity )。

Next, we must set the scroll-snap-points value. In this case, the images are in a column, so we’ll use the scroll-snap-points-y property, with repeating value of 100%, representing repeated units of the container’s height.

接下来，我们必须设置scroll-snap-points值。 在这种情况下，图像位于一列中，因此我们将使用scroll-snap-points-y属性，其重复值为100% ，表示容器高度的重复单位。

#scrollcontainer figure 
    scroll-snap-points-y: 100%;
}

坐标和目的地 (Coordinates & Destinations)

There are two other properties we must deal with: scroll-snap-coordinate and scroll-snap-destination. The former is applied to the elements we want to “stick” during the scroll, while the latter is applied to the nearest ancestor does not scroll itself. In our case, the code looks something like this:

我们还必须处理其他两个属性： scroll-snap-coordinate和scroll-snap-destination 。 前者应用于在滚动过程中我们要“粘贴”的元素，而后者应用于最近的祖先，不会滚动自身。 在我们的例子中，代码看起来像这样：

#scrollcontainer figure { 
    scroll-snap-destination: 50% 50%;
}
#scrollcontainer img {
    scroll-snap-coordinate: 50% 50%;
}

Essentially, these two values “map” each image to a point inside the scrolling container: the center of each photograph should stick to the exact center of its container. There are other possibilities, of course: making the scroll horizontal, rather than vertical (which would just require changing scroll-snap-points-y to scroll-snap-points-x; diagonal snap-scrolling, and moving elements of different sizes. I’ll cover these applications and more in future articles.

从本质上讲，这两个值将每个图像“映射”到滚动容器内的一个点：每张照片的中心应坚持其容器的确切中心。 当然，还有其他可能性：使滚动条为水平滚动，而不是垂直scroll-snap-points-y需要将scroll-snap-points-y更改为scroll-snap-points-x ；对角对齐滚动以及移动不同大小的元素即可。我将在以后的文章中介绍这些应用程序以及更多内容。

Unfortunately, Safari currently has a different interpretation of this value, and so is listed seperately with a a href="/217/CSS-Vendor-Prefixes-and-Flags">vendor prefix:

不幸的是，Safari当前对此值的解释不同，因此单独列出了aa href =“ / 217 / CSS-Vendor-Prefixes-and-Flags”>供应商前缀：

#scrollcontainer figure { 
	-webkit-scroll-snap-destination: 100% 100%;
}
#scrollcontainer img {
    -webkit-scroll-snap-coordinate: 50% 50%;
}

支持，前缀和填充 (Support, Prefixes & Polyfills)

Support for CSS Snap Points is fairly good across modern browsers: Firefox has full support, and Safari (desktop and iOS) implementation has a few limitations. Perhaps suprisingly, Microsoft has supported CSS Scroll Snap Points since IE10, under a -ms prefix. IE11 and Edge support the API on all screens (IE10 only supported it on touch screens.)

在现代浏览器中，对CSS Snap Point的支持相当不错： Firefox具有全面的支持，而Safari (台式机和iOS)的实现存在一些限制。 也许令人惊讶的是，Microsoft从IE10开始以-ms前缀支持CSS滚动捕捉点。 IE11和Edge在所有屏幕上都支持API(IE10仅在触摸屏上支持它。)

For browsers without support, I’d recommend Clemens Krack’s scrollsnap-polyfill, as has no dependencies (other than polyfill.js), uses requestAnimationFrame for movement, and has a nice little added “bounce” on the snaps.

对于不支持的浏览器，我建议使用Clemens Krack的scrollsnap-polyfill ，因为它没有依赖关系(除了polyfill.js)，使用requestAnimationFrame进行移动，并且在快照上添加了一些“反弹”。

翻译自: https://thenewcode.com/414/Make-a-Dynamic-Portfolio-with-CSS-Scrolling-Snap-Points

锚点css动态滚动