介绍
小编给大家分享一下CSS实现基于用户滚动应用的方法,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获、下面让我们一起去了解一下吧!
通过将当前滚动偏移映射到html元素上的属性,我们可以根据当前滚动位置设置页面上的元素样式。我们可以使用它来构建一个浮动导航组件。
这是我们将使用的html, & lt; header>当我们向下滚动时,我们希望在内容之上浮动的一个很好的组件。
& lt; header>我# 39;m页面header
& lt; p>很多# 39;年代的内容在这里……& lt;/p>
& lt; p>更美丽内容……& lt;/p>
& lt; p>内容……& lt;/p> 首先,我们将监听该& # 39;滚动# 39;事件,文档并且scrollY每次用户滚动时我们都会请求当前位置。
document.addEventListener(& # 39;滚动# 39;()=比;{
document.documentElement.dataset。滚动=window.scrollY;
}); 我们将滚动位置存储在html元素的数据属性中。如果您使用开发工具查看DOM,它将如下所示。
& lt; html data-scroll=?”;在 现在我们可以使用此属性来设置页面上的元素样式。
/*确保头总是至少3 em高*/标题{
最小高度:3他们;
宽度:100%;
background - color: # fff;
｝/*储备一样的高度在页面顶部的标题最小高度*/html:没有([data-scroll=& # 39; 0 & # 39;])身体{
padding-top: 3他们;
｝/*开关固定定位,把标题的页面*/html:没有([data-scroll=& # 39; 0 & # 39;])标题{
位置:固定;
上图:0;
z - index: 1;/*这个不必将帮助销售浮动效果*/不必:0 0 .5em rgba (0, 0, 0, 0。5);
} 基本上就是这样,当向下滚动时,标题现在将自动从页面中分离并浮动在内容之上.JavaScript代码并不关心这一点,它的任务就是将滚动偏移量放在数据属性中。这很好,因为JavaScript和CSS之间没有紧密耦合。
仍有一些改进,主要是在性能领域。
但首先,我们必须修复脚本,以适应页面加载时滚动位置不在顶部的情况。在这些情况下,标题将呈现错误。
页面加载时,我们必须快速获取当前滚动偏移量。这确保了我们始终与当前的事态同步。
//读取滚动的位置并将其存储在数据属性//所以我们可以使用它在我们的样式表
const storeScroll=()=比;{
document.documentElement.dataset。滚动=window.scrollY;
｝//监听新的滚动事件
document.addEventListener(& # 39;滚动# 39;,storeScroll);//更新滚动的位置
storeScroll (); 接下来我们将看一些性能改进。如果我们请求该scrollY位置,浏览器将必须计算页面上每个元素的位置,以确保它返回正确的位置。如果我们不强迫它每次滚动互动都这样做是最好的。
要做到这一点,我们需要一个防反跳方法,这个方法会将我们的请求排队,直到浏览器准备好绘制下一帧,此时它已经计算了页面上所有元素的位置,所以它不会再来一遍。
//防反跳函数接收函数作为一个参数
const防反跳=(fn)=比;{//这是requestAnimationFrame参考,如果我们希望我们可以取消它
让框架;//防反跳函数返回一个新的可以接收数量可变的参数的函数
返回(…params)=比;{//如果帧变量被定义,明确的现在,和队列的下一帧
如果(帧){
cancelAnimationFrame(框架);
｝//队列的函数调用下一帧
?requestAnimationFrame(()=比;{//调用函数和传递任何参数,我们收到了
fn (…params);
}）;
｝
};//读取滚动的位置并将其存储在数据属性//所以我们可以使用它在我们的样式表
const storeScroll=()=比;{
document.documentElement.dataset。滚动=window.scrollY;
｝//监听新的滚动事件,这里我们防反跳storeScroll函数
document.addEventListener(& # 39;滚动# 39;,防反跳(storeScroll));//更新滚动的位置
storeScroll (); 通过标记事件,被动我们可以告诉浏览器我们的滚动事件不会被触摸交互取消(例如与谷歌地图等插件交互时)。这允许浏览器立即滚动页面,因为它现在知道该事件不会被取消。
document.addEventListener(& # 39;滚动# 39;防反跳(storeScroll),{被动:真}); 以上是CSS实现基于用户滚动应用的方法的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注行业资讯频道!
