最新案例推荐
点击查看
扫一扫查看
最新行业案例
最新行业案例
如何让你的网站拥有精美的滚动体验
发表于：2019-12-20
在传统上，web落后于本地平台在某种程度上体现在应用程序体验的“流畅性”，其实这种感觉大多来自于用户界面对用户交互的响应方式，包括在内容中滚动的行为。
感觉大多来自于用户界面对用户交互的响应方式，包括在内容中滚动的行为。 面对web平台的局限性，开发人员经常接触JavaScript库和框架来更改滚动网页的体验，如果实现时未充分考虑用户体验，则并非是一件好事。更多的库可能导致页面膨胀，并降低网站的性能。但是有了相对较新的CSS Scroll Snap规范，我们就可以使用web标准来控制网页的滚动行为，而无需使用繁琐的库。
滚动捕捉
用户可以通过多种方式来控制网页的滚动位置，例如使用鼠标，触摸手势或箭头键。与线性滚动体验不同，滚动捕捉规范使网页可以在用户滚动时捕捉到特定点。为此，我们需要一个高度固定的元素作为滚动容器，并且该元素的直接子元素将确定捕捉点。
滚动捕捉需要存在两个主要的CSS属性：scroll-snap-type和scroll-snap-align。scroll-snap-type适用于滚动容器元素，并接受两个关键字值。它告诉浏览器：
▪ 捕捉方向
▪ 是否必须执行捕捉
scroll-snap-align应用于子元素下，我们还需要在滚动容器上设置固定高度，并将相关overflow属性设置为scroll。
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: 'Helvetica', sans-serif;
}
.scroll-container {
height: 100vh;
overflow-y: scroll; scroll-snap-type: y mandatory;
}
section {
height: 100vh;
scroll-snap-align: center;
}
section {
padding: 1rem;
display: flex;
align-items: center;
justify-content: center;
background-color: darkorchid;
}
section:nth-child(2n) {
background-color: turquoise;
}
section:nth-child(3n) {
background-color: tomato;
}
box-sizing: border-box;
}
body {
margin: 0;
font-family: 'Helvetica', sans-serif;
}
.scroll-container {
height: 100vh;
overflow-y: scroll; scroll-snap-type: y mandatory;
}
section {
height: 100vh;
scroll-snap-align: center;
}
section {
padding: 1rem;
display: flex;
align-items: center;
justify-content: center;
background-color: darkorchid;
}
section:nth-child(2n) {
background-color: turquoise;
}
section:nth-child(3n) {
background-color: tomato;
}
如果将滚动容器和每个部分的高度都设置为100vh，这会影响整个网页的滚动体验。但滚动捕捉也可以在较小的组件上实现。在x轴上设置滚动捕捉可能会产生诸如轮播的效果。 如下，您也可以水平滚动浏览各个部分：
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: 'Helvetica', sans-serif;
}
.scroll-container {
height: 70vw;
max-height: 30rem;
margin: 3rem auto;
display: flex;
overflow-x: scroll;
scroll-snap-type: x mandatory;
}
section {
height: 100%;
flex: 0 0 100%;
scroll-snap-align: center;
}
section {
padding: 1rem;
display: flex;
align-items: center;
justify-content: center;
background-color: darkorchid;
text-align: center;
}
section:nth-child(2n) {
background-color: turquoise;
}
section:nth-child(3n) {
background-color: tomato;
}
box-sizing: border-box;
}
body {
margin: 0;
font-family: 'Helvetica', sans-serif;
}
.scroll-container {
height: 70vw;
max-height: 30rem;
margin: 3rem auto;
display: flex;
overflow-x: scroll;
scroll-snap-type: x mandatory;
}
section {
height: 100%;
flex: 0 0 100%;
scroll-snap-align: center;
}
section {
padding: 1rem;
display: flex;
align-items: center;
justify-content: center;
background-color: darkorchid;
text-align: center;
}
section:nth-child(2n) {
background-color: turquoise;
}
section:nth-child(3n) {
background-color: tomato;
}
交叉口观测器API
通过实现上述功能，我们的网页已经具有了更原生的感觉。为了进一步改善这一点，我们可以添加一些基于滚动的过渡和动画。为此，我们需要使用API，使用一些JavaScript。这使我们可以创建一个观察器，监视与视口相交的元素，并在发生这种情况时触发回调函数。它比依赖连续侦听滚动事件的库更有效。
例如，只要我们的部分之一与容器相交25％（使用该threshold选项），就会触发回调函数。如果相交发生时，回调在该部分中添加至少25％的类（在元素进入视图时生效），否则将其删除（当元素移出视图时） 。然后，我们可以为每个部分添加一些CSS以过渡其内容： 当然，也可以在CSS或JS中实现更多精美的过渡和动画效果！
const sections = [...document.querySelectorAll("section")];
let options = {
rootMargin: "0px",
threshold: 0.25
};
const callback = (entries, observer) => {
entries.forEach(entry => {
const { target } = entry;
console.log(entry, target)
if (entry.intersectionRatio >= 0.25) {
target.classList.add("is-visible");
} else {
target.classList.remove("is-visible");
}
});
};
const observer = new IntersectionObserver(callback, options);
sections.forEach((section, index) => {
observer.observe(section);
});
window.onload(removeClass());
let options = {
rootMargin: "0px",
threshold: 0.25
};
const callback = (entries, observer) => {
entries.forEach(entry => {
const { target } = entry;
console.log(entry, target)
if (entry.intersectionRatio >= 0.25) {
target.classList.add("is-visible");
} else {
target.classList.remove("is-visible");
}
});
};
const observer = new IntersectionObserver(callback, options);
sections.forEach((section, index) => {
observer.observe(section);
});
window.onload(removeClass());
位置：粘性
还有一个CSS属性可以帮助您提高滚动体验，那就是position属性。与position：fixed不同，position：sticky它更像是临时锁定，锁定元素相对于最近的相对祖先的位置并且不会改变。位置值为的元素sticky将固定不变，直到达其父元素的阈值为止，此时该元素将恢复相对定位。 通过“粘贴”滚动部分中的某些元素，即它们与部分之间滚动的定做有关，仅仅使用CSS就能指示元素响应其在容器中的位置。
浏览器支持和后备
该scroll-snap-type和scroll-snap-align性能都相当良好支撑。前者需要Edge和IE的前缀，而旧版本的Safari不支持轴值。在较新版本的Safari中，它运行良好。除IE之外，Intersection Observer同样具有良好的支持水平。
通过将与滚动相关的代码包装在功能查询中，我们可以提供常规的滚动体验，以作为较旧的浏览器用户的后备方式，在这些浏览器中，访问内容至关重要。不支持scroll-snap-type轴值的浏览器将正常滚动。
在一些基于滚动的样式上花费时间似乎有些愚蠢或轻浮。但我相信这是将Web定位为本地应用程序的可行替代方案，保持开放和可访问性的重要组成部分。尽管这些新的CSS功能并未提供我们可能期望的全功能JS库所提供的全部控制，但它们具有一个主要优点：简单性和可靠性。通过在可能的情况下利用Web标准，我们可以兼得两全：满足客户期望的光滑且引人注目的网站，并为用户带来更好的性能。
（非特殊说明，本文版权归原作者所有，转载请注明出处 ）
标签： 上海网站建设、上海网站制作、高端网站设计、迈若网络
手机随时获取迈若动态，扫描左侧二维码
添加迈若微信公众号【manro_since2005】
