Locomotive Scroll 属性（Attributes）完整指南：data-scroll 系列声明式滚动与视口检测实战

【免费下载链接】locomotive-scroll Detection of elements in viewport smooth scrolling with parallax.项目地址https://gitcode.com/gh_mirrors/lo/locomotive-scroll点击查看免费下载本文是 Locomotive Scroll 官方文档中Attributes属性章节的深度实战指南完整讲解data-scroll、data-scroll-position、data-scroll-offset、data-scroll-speed、data-scroll-call等全部声明式属性。读者学完后将能够通过纯 HTML 属性完成元素进出视口的检测、自定义类名切换、进度驱动的 CSS 动画、自定义事件回调、滚动定位以及视差parallax效果并理解这些属性在源码层面的解析与执行机制。属性总览从 HTML 声明到滚动系统Locomotive Scroll 的所有交互能力都围绕一个核心属性展开data-scroll。它声明这个元素参与视口检测是其他所有滚动属性生效的前提。初始化时核心模块会在滚动容器内通过querySelectorAll([data-scroll])收集所有带该属性的元素见 packages/lib/core/Core.ts并为每个元素创建一个ScrollElement实例来管理其进度、视口交点与回调。每个属性的取值会通过元素的dataset在构造器中统一解析见 packages/lib/core/ScrollElement.ts其类型定义在 packages/lib/types.ts 中有完整声明。属性是否需要 requestAnimationFrameRAF是分流的关键Core中的_checkRafNeeded方法会检查元素是否声明了data-scroll-offset非默认值、data-scroll-position非默认值、data-scroll-speed、data-scroll-css-progress、data-scroll-event-progress之一若是则该元素进入 RAF 列表并随动画帧实时计算否则仅由 IntersectionObserver 触发进入/离开回调见 packages/lib/core/Core.ts。!-- 最小用法仅在进出视口时切换类名 -- div>div>div>div>div>main styleheight: 150vh; h1Hello/h1 h2>import LocomotiveScroll from locomotive-scroll; const locomotiveScroll new LocomotiveScroll();data-scroll-call进入/离开时派发自定义事件类型stringdata-scroll-call允许在元素进入视口时触发一个自定义事件。其值即自定义事件的名称。你可以在 JavaScript 中用事件监听器处理这些事件执行特定操作或行为。div>window.addEventListener(scrollEvent, (e) { const { target, way, from } e.detail; console.log(target: ${target}, way: ${way}, from: ${from}); });事件派发在_dispatchCall中实现通过new CustomEvent(customEventName, { detail: { target: this.$el, way, from } })构造事件并window.dispatchEvent见 packages/lib/core/ScrollElement.ts。其中way为enter或leave由setInview/setOutOfView决定packages/lib/core/ScrollElement.tsfrom由_getScrollCallFrom计算比较当前滚动位置与交点起止值取更接近的一端返回start或endpackages/lib/core/ScrollElement.ts。在演示页中data-scroll-callscrollEvent与data-scroll-positionend,start、data-scroll-repeat组合使用实现了每次进入/离开都触发自定义事件的滚动场景见 packages/demo/src/pages/index.astro。data-scroll-css-progress以 CSS 变量驱动动画声明data-scroll-css-progress后元素上会新增一个 CSS 变量--progress其值表示元素的当前进度范围在0到1之间。借助它你可以纯 CSS 实现基于滚动进度的动态效果。h1 styleopacity: calc(1 - var(--progress)); >div>import LocomotiveScroll from locomotive-scroll; const locomotiveScroll new LocomotiveScroll(); window.addEventListener(progressEvent, (e) { const { target, progress } e.detail; console.log(target: ${target}, progress: ${progress}); });事件通过_setCustomEventProgress派发detail结构为{ target: this.$el, progress: currentProgress }见 packages/lib/core/ScrollElement.ts。进度计算由_computeProgress完成normalize(intersection.start, intersection.end, currentScroll)将当前滚动位置映射到0~1再经clamp(0, 1, ...)截断packages/lib/core/ScrollElement.tsclamp与normalize的实现见 packages/lib/utils/maths.ts。演示页中该属性与data-scroll-offset10%, 10%配合仅在元素进入视口后持续上报进度见 packages/demo/src/pages/index.astro。data-scroll-to 系列声明式滚动定位data-scroll-todata-scroll-to会阻止点击事件的默认行为并启动向目标的滚动。如果元素是链接a则使用href属性作为目标否则若元素带有data-scroll-to-href属性则使用该属性值作为目标。a href#top>button>a href#section-2>a href#section-2>!-- 触屏设备上视差禁用默认 -- div>import LocomotiveScroll from locomotive-scroll; const locomotiveScroll new LocomotiveScroll(); locomotiveScroll.scrollTo(#section-2, { offset: 100, duration: 1.5 });小结属性速查表属性类型 / 默认值作用data-scroll布尔声明启用元素视口检测一切的前提data-scroll-positionstring/start,end指定进入/离开视口的触发锚点start/middle/enddata-scroll-offsetstring/0,0指定进入/离开视口的触发偏移像素或百分比data-scroll-classstring/is-inview元素可见时添加的自定义类名data-scroll-repeat布尔声明是否重复触发进出检测data-scroll-speednumber视差速度相对容器尺寸data-scroll-callstring进入/离开时派发的自定义事件名data-scroll-css-progress布尔声明暴露--progressCSS 变量0~1data-scroll-event-progressstring触发携带进度的自定义事件data-scroll-to布尔声明拦截点击并平滑滚动到目标data-scroll-to-hrefstring指定滚动目标非链接元素data-scroll-to-offsetnumber滚动定位的顶部偏移等价scroll-padding-topdata-scroll-to-durationnumber滚动动画时长秒data-scroll-ignore-fold布尔声明忽略折页内进度重映射data-scroll-enable-touch-speed布尔声明触屏设备上启用视差通过这些声明式属性配合 Usage 文档 中的初始化代码与 Options 文档 中的lenisOptions自定义滚动容器即可在不编写一行滚动逻辑的情况下构建出完整的视口检测、进度动画与视差滚动体验。赞分享【免费下载链接】locomotive-scroll Detection of elements in viewport smooth scrolling with parallax.项目地址https://gitcode.com/gh_mirrors/lo/locomotive-scroll点击查看免费下载相关推荐Locomotive-Scroll 终极指南从零掌握视差滚动与视口检测Locomotive Scroll 终极指南从零掌握视差滚动与视口检测 Locomotive Scroll 是一个功能强大的JavaScript库专门Locomotive Scroll终极指南掌握视口检测与平滑滚动技术的完整教程Locomotive Scroll终极指南掌握视口检测与平滑滚动技术的完整教程 Locomotive Scroll是一款强大的JavaScript库专注于视革命性视差滚动引擎locomotive-scroll让元素检测与平滑滚动完美融合革命性视差滚动引擎locomotive scroll让元素检测与平滑滚动完美融合 你还在为网页滚动效果单调而烦恼还在为元素进入视口时缺乏动态反馈而头疼lo上一篇RegExr插件开发指南扩展功能与自定义工具集成下一篇二进制数据的时间序列分析终极指南用fq工具轻松跟踪变化趋势创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考