【免费下载链接】locomotive-scroll Detection of elements in viewport smooth scrolling with parallax.项目地址https://gitcode.com/gh_mirrors/lo/locomotive-scroll点击查看免费下载导读本文以仓库内 packages/landing/docs/technologies.md 为核心骨架系统拆解 Locomotive 官方前端样板工程Locomotive Boilerplate所采用的全套技术栈包括基于 SCSS ITCSS/Inuit CSS 的样式架构与命名体系、基于 esbuild 与 modularJS 的模块化脚本体系、基于 modularLoad 的页面切换与懒加载方案以及基于 Locomotive Scroll 的视口元素检测与平滑滚动/视差实现。读完本文你将掌握这套样板工程的目录组织逻辑、各技术的真实接入方式与关键源码调用链能够直接在 packages/landing 目录下定位每一层实现并复用到自己的项目中。技术栈全景依据文档与 packages/landing/package.json 中的实际依赖这套样板工程的技术选型可归纳如下关注领域技术选型仓库中的证据样式语言SCSSSass 超集文档记载使用 node-sass/LibSass 处理当前仓库 devDependencies 中锁定为sass: ^1.69.5Dart Sass 实现package.json样式后处理PostCSS Autoprefixer 添加实验特性厂商前缀postcss ^8.4.21、autoprefixer ^10.4.13package.jsonCSS 架构基于 Inuit CSS 与 ITCSS 的分层目录结构assets/stylesCSS 命名简化版 BEM.block/.block_element/.-modifier 命名空间前缀本文「CSS 命名」小节JS 构建esbuild 打包与压缩 ES Modulespackage.json 中esbuild ^0.17.6JS 模块体系modularJSnpm 包名modujs自动初始化模块、跨模块方法调用、事件委托、作用域 DOM 选择app.js页面切换modularLoad页面过渡动画与懒加载modules/Load.js滚动检测Locomotive Scroll视口元素检测 平滑滚动 视差modules/Scroll.js 与 packages/lib此外样板工程还使用 Eleventy11ty/eleventy ^2.0.1配合 Twig 模板渲染页面见 views/layouts/base.twig并使用 BrowserSync 做开发期多浏览器同步预览这些属于构建与渲染层面的配套本文重点仍聚焦文档所阐述的四大核心主题。StylesSCSS 驱动的样式体系文档明确指出SCSS 是 CSS 的超集为样式的模块化与工程化提供了大量增强特性。构建链上样板工程使用 node-sassLibSass将 SCSS 编译压缩为 CSS再交由 PostCSS 与 Autoprefixer 解析并为实验性特性补充厂商前缀。需要说明的是文档成文于 node-sassLibSass时代而当前仓库 package.json 的 devDependencies 中已将编译器替换为sass: ^1.69.5Dart Sass 官方实现PostCSS 与 Autoprefixer 仍保留postcss ^8.4.21、autoprefixer ^10.4.13。在使用本仓库时应以sass依赖为准。CSS ArchitectureITCSS 与 Inuit CSS 的分层文档给出的 CSS 架构基于Inuit CSS与ITCSSInverted Triangle CSS共七层从「低特异性、影响面广」到「高特异性、精确覆盖」排列settings全局变量、站点级配置、开关项如断点、颜色、间距、字体。tools站点级 mixin 与函数如rem()、媒体查询封装。generic低特异性、影响面广的规则集如 reset。elements未加 class 的裸 HTML 元素如a {}、blockquote {}、address {}。objects对象、抽象与设计模式如.o-layout {}。components离散、完整的 UI 组成块如.c-carousel {}。utilities高特异性、非常显式的选择器用于覆盖与辅助如.u-hidden {}。这一分层在仓库中得到完整落地。查看 assets/styles/main.scss可以看到引入顺序严格遵循 ITCSS 的倒三角次序先是generic/generic、generic/media、generic/button然后是elements/document再是objects/container、objects/icons、objects/grid接着是components/heading、components/hero、components/rail、components/footer等一长串组件最后才是utilities/grid-column、utilities/theme、utilities/helpers、utilities/spacing等工具类。而 assets/styles/_core.scss 通过forward统一转发tools/与settings/下的全部文件如tools/maths、tools/functions、settings/config.colors、settings/config.breakpoints、settings/config.eases、settings/config.spacers、settings/config.timings、settings/config.zindexes等成为全站样式可复用的基础层。以settings/_config.breakpoints.scss为例断点变量文档示例中出现的$to-medium即来自这一层以from-*/$to-*语义贯穿全部响应式写法。CSS Naming Convention简化 BEM文档规定使用简化的 BEMBlock, Element, Modifier语法只有三种形态.block—— 块.block_element—— 元素下划线连接.-modifier—— 修饰符前导短横线相比标准 BEM 的双下划线__与双短横线--这里用单个下划线和单短横线配合 SCSS 的嵌套写法更简洁。CSS Namespacing为 UI 类名增加透明度文档为 class 定义了五类命名空间前缀目的是让开发者在阅读类名时立刻知道它的「职责边界」o-Object可在任意无关上下文中复用的对象类。修改它可能波及其他大量无关位置需要谨慎。c-Component具体的、与实现绑定的 UI 组件。对它的样式修改应当能在当前上下文中被察觉且不应产生副作用。u-Utility职责非常单一往往只提供一条声明的工具类。不可绑定业务、不可随意改动可跨任意 UI 复用。s-Scope创建新的样式作用域类似 Theme 但不限于外观。应克制使用滥用会导致 CSS 质量下降。is-/has-表示「当前因某种状态/条件而如此渲染」说明 DOM 上正因某个状态被激活而临时、可选或短暂地附加了样式。仓库中这些前缀随处可见如 views/layouts/base.twig 的html classis-loading使用is-状态类assets/scripts/config.js 中的CSS_CLASS常量定义了is-loading、is-loaded、is-ready、fonts-loaded、c-lazy、-lazy-loaded等其中c-lazy即组件前缀、-lazy-loaded即 BEM 修饰符形态assets/styles/components 目录下_preloader.scss、_rail.scss、_header.scss等均输出c-前缀组件类。Example #1类名体系与 SCSS 嵌套的完整示例文档给出了 HTML 与 SCSS 对照的完整示例直接展示了c-、o-、u-前缀与简化 BEM、响应式修饰符的组合用法div classc-block -large div classc-block_layout o-layout div classo-layout_item u-1/2from-medium div classc-block_heading o-h -mediumHeading/div /div div classo-layout_item u-1/2from-medium a classc-block_button o-button -outline href#Button/a /div /div /div.c-block { .-large { padding: rem(60px); } } .c-block_heading { media (max-width: $to-medium) { .c-block.-large { margin-bottom: rem(40px); } } }几个值得注意的实现细节rem(60px)是tools层提供的尺寸转换函数——assets/styles/tools/_functions.scss 中封装了rem()等函数配合 assets/styles/tools/_maths.scss 完成数学计算。$to-medium来自settings层的断点配置assets/styles/settings/_config.breakpoints.scss而 HTML 中的u-1/2from-medium则是同一套断点语义在工具类上的响应式表达体现了「settings 一处定义、HTML/SCSS 处处引用」的设计。.-large、.-medium、.-outline是 BEM 修饰符形态c-block_heading、o-layout_item是元素形态。Scriptsesbuild modularJS 的模块化脚本体系文档说明JavaScript/ES 模块的打包与压缩由esbuild负责而模块组织则建立在modularJSnpm 包名modujs之上后者是在 ES Modules 基础上的一层轻量框架提供四个核心能力自动初始化可见模块轻松调用其他模块的方法通过事件委托快速设置作用域事件在模块作用域内简单地选择 DOM 元素。仓库的接入方式清晰可见。assets/scripts/app.js 顶部即import modular from modujs并通过import * as modules from ./modules引入全部模块随后const app new modular({ modules })创建实例、app.init(app)完成初始化模块注册表在 assets/scripts/modules.js 中统一导出Load、Rail、Scroll、Randomize、MaskLines、FadeInText、HoverShuffle。每个模块都继承modujs的module基类并实现init()/destroy()生命周期。构建层面package.json 的 scripts 使用node --experimental-json-modules --no-warnings build/watch.js开发与build/build.js构建由自定义任务运行器调用 esbuild 完成打包压缩esbuild 还负责将process.env.NODE_ENV按环境替换assets/scripts/config.js 头部注释引用了 esbuild 官方文档对这一替换行为的说明从而支持ENV.IS_DEV/ENV.IS_PROD之类的环境分支。Example #2modularJS 模块的完整写法文档给出了一个典型的 modularJS 模块示例HTML 中用data-module-example声明模块根节点内部用data-example声明具名作用域节点JS 中通过this.events声明事件委托点击[data-exampleload]触发loadMore通过this.$(main)在模块作用域内取节点div>import { module } from modujs; export default class extends module { constructor(m) { super(m); this.events { click: { load: loadMore } }; } loadMore() { this.$(main)[0].classList.add(is-loading); } }仓库中的 assets/scripts/modules/Scroll.js 是该模式的真实范本构造函数中绑定this.onScrollBind、this.changeHeaderThemeBindinit()中创建 Locomotive Scroll 实例并绑定事件destroy()中调用this.unbindEvents()与this.scroll.destroy()onScroll回调中通过this.call(onScroll, { velocity, direction }, Rail)把滚动数据传递给 Rail 模块——这正是文档所述「轻松调用其他模块方法」能力的落地。Page transitionsmodularLoad 页面切换与懒加载文档说明页面过渡动画与懒加载由modularLoad承担。其工作方式是通过data-load-container声明容器、data-load声明带过渡名称的链接、data-load-src声明懒加载资源nav a href/Home/a a href/page>import modularLoad from modularload; this.load new modularLoad({ enterDelay: 300, transitions: { transitionName: { enterDelay: 450 } } });配置项中顶层enterDelay: 300为所有过渡的默认进入延迟transitions内可按过渡名覆盖如transitionName单独设为450。样板工程的真实接入位于 assets/scripts/modules/Load.jsinit()中创建new modularLoad({ enterDelay: 0, transitions: { customTransition: {} } })并监听loaded事件——当一次页面切换完成后在回调里执行this.call(destroy, oldContainer, app)销毁旧容器内的模块、this.call(update, newContainer, app)初始化新容器内的模块从而保证页面切换后滚动、视差等交互模块都能正确重建。与之对应的模板结构在 views/layouts/base.twig 中body>div>import LocomotiveScroll from locomotive-scroll; this.scroll new LocomotiveScroll({})仓库对 Locomotive Scroll 的接入具有源码级证据滚动容器声明data-module-scrollmain出现在 views/layouts/base.twig 中作为 modularJS 的 Scroll 模块根节点。真实初始化在 assets/scripts/modules/Scroll.js 的init()中new LocomotiveScroll({ modularInstance: this, scrollCallback: this.onScrollBind })—— 传入 modularJS 实例以支持跨模块通信并注册滚动回调。回调数据结构onScroll({ scroll, limit, velocity, direction, progress })解构出滚动位置、极限值、速度、方向与整体进度Scroll 模块据此计算this.scrollDirection向html添加/移除is-scrolling-up状态类并把{ velocity, direction }通过this.call(...)转交给 Rail 模块驱动跑马灯视差详见 assets/scripts/modules/Rail.js 的onScroll方法。常用 APIscrollTo(target, options)Scroll 模块的scrollTo方法中对duration等选项做了默认值合并、addScrollElements($newContainer)/removeScrollElements($oldContainer)用于观察/取消观察新进入 DOM 的滚动元素配合页面切换后调用、destroy()在模块销毁时清理。值得一提的细节是Scroll.js 中import LocomotiveScroll from ../../../../lib/index直接引用仓库内的库源码目录 packages/lib含 index.ts、core/Core.ts、core/IO.ts、core/ScrollElement.ts、core/types.ts等即 landing 站点运行的是与 npm 包同源的本地实现而非单独安装的外部副本便于在样板工程中直接调试库行为。延伸阅读围绕本文主题可以继续深入以下仓库文档与源码packages/landing/README.md样板工程的特性清单、环境要求Node ≥ 17.9 / NPM ≥ 8.0当前 package.json engines 为 node ≥ 20.1、npm start/npm run build等命令。packages/landing/docs/development.md自定义任务运行器与资源构建流程。packages/landing/docs/grid.md与本文o-layout、u-1/2from-medium配套的自定义栅格系统。packages/landing/assets/styles/main.scss 与 packages/landing/assets/styles/_core.scssITCSS 分层的实际落地。packages/landing/assets/scripts/app.js、assets/scripts/modules.jsmodularJS 实例化与模块注册。packages/landing/assets/scripts/modules/Scroll.js、assets/scripts/modules/Load.js、assets/scripts/modules/Rail.js滚动、页面切换与视差模块的完整实现。packages/libLocomotive Scroll 库的 TypeScript 源码Core、IO、ScrollElement、types可对照data-scroll、data-scroll-speed等属性的底层解析逻辑。赞分享【免费下载链接】locomotive-scroll Detection of elements in viewport smooth scrolling with parallax.项目地址https://gitcode.com/gh_mirrors/lo/locomotive-scroll点击查看免费下载相关推荐Locomotive Astro Boilerplate 实战指南在 Astro 5 中集成 Locomotive Scroll 实现平滑滚动与视差Locomotive Astro Boilerplate 实战指南在 Astro 5 中集成 Locomotive Scroll 实现平滑滚动与视差 导读 pESP32物联网开发终极指南解锁Arduino生态下的无限可能ESP32物联网开发终极指南解锁Arduino生态下的无限可能 Arduino ESP32核心库是连接Arduino生态与Espressif ESP32系列芯嵌入式物联网驱动开发Locomotive Scroll 属性Attributes完整指南data-scroll 系列声明式滚动与视口检测实战Locomotive Scroll 属性Attributes完整指南data scroll 系列声明式滚动与视口检测实战 本文是 Locomotive S上一篇终极指南如何在Linux桌面无缝运行Android应用容器技术下一篇三步掌握B站视频下载神器BilibiliDown终极使用指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Locomotive Boilerplate 前端技术栈深度解析：从 ITCSS 样式架构到 Locomotive Scroll 滚动检测实战
【免费下载链接】locomotive-scroll Detection of elements in viewport smooth scrolling with parallax.项目地址https://gitcode.com/gh_mirrors/lo/locomotive-scroll点击查看免费下载导读本文以仓库内 packages/landing/docs/technologies.md 为核心骨架系统拆解 Locomotive 官方前端样板工程Locomotive Boilerplate所采用的全套技术栈包括基于 SCSS ITCSS/Inuit CSS 的样式架构与命名体系、基于 esbuild 与 modularJS 的模块化脚本体系、基于 modularLoad 的页面切换与懒加载方案以及基于 Locomotive Scroll 的视口元素检测与平滑滚动/视差实现。读完本文你将掌握这套样板工程的目录组织逻辑、各技术的真实接入方式与关键源码调用链能够直接在 packages/landing 目录下定位每一层实现并复用到自己的项目中。技术栈全景依据文档与 packages/landing/package.json 中的实际依赖这套样板工程的技术选型可归纳如下关注领域技术选型仓库中的证据样式语言SCSSSass 超集文档记载使用 node-sass/LibSass 处理当前仓库 devDependencies 中锁定为sass: ^1.69.5Dart Sass 实现package.json样式后处理PostCSS Autoprefixer 添加实验特性厂商前缀postcss ^8.4.21、autoprefixer ^10.4.13package.jsonCSS 架构基于 Inuit CSS 与 ITCSS 的分层目录结构assets/stylesCSS 命名简化版 BEM.block/.block_element/.-modifier 命名空间前缀本文「CSS 命名」小节JS 构建esbuild 打包与压缩 ES Modulespackage.json 中esbuild ^0.17.6JS 模块体系modularJSnpm 包名modujs自动初始化模块、跨模块方法调用、事件委托、作用域 DOM 选择app.js页面切换modularLoad页面过渡动画与懒加载modules/Load.js滚动检测Locomotive Scroll视口元素检测 平滑滚动 视差modules/Scroll.js 与 packages/lib此外样板工程还使用 Eleventy11ty/eleventy ^2.0.1配合 Twig 模板渲染页面见 views/layouts/base.twig并使用 BrowserSync 做开发期多浏览器同步预览这些属于构建与渲染层面的配套本文重点仍聚焦文档所阐述的四大核心主题。StylesSCSS 驱动的样式体系文档明确指出SCSS 是 CSS 的超集为样式的模块化与工程化提供了大量增强特性。构建链上样板工程使用 node-sassLibSass将 SCSS 编译压缩为 CSS再交由 PostCSS 与 Autoprefixer 解析并为实验性特性补充厂商前缀。需要说明的是文档成文于 node-sassLibSass时代而当前仓库 package.json 的 devDependencies 中已将编译器替换为sass: ^1.69.5Dart Sass 官方实现PostCSS 与 Autoprefixer 仍保留postcss ^8.4.21、autoprefixer ^10.4.13。在使用本仓库时应以sass依赖为准。CSS ArchitectureITCSS 与 Inuit CSS 的分层文档给出的 CSS 架构基于Inuit CSS与ITCSSInverted Triangle CSS共七层从「低特异性、影响面广」到「高特异性、精确覆盖」排列settings全局变量、站点级配置、开关项如断点、颜色、间距、字体。tools站点级 mixin 与函数如rem()、媒体查询封装。generic低特异性、影响面广的规则集如 reset。elements未加 class 的裸 HTML 元素如a {}、blockquote {}、address {}。objects对象、抽象与设计模式如.o-layout {}。components离散、完整的 UI 组成块如.c-carousel {}。utilities高特异性、非常显式的选择器用于覆盖与辅助如.u-hidden {}。这一分层在仓库中得到完整落地。查看 assets/styles/main.scss可以看到引入顺序严格遵循 ITCSS 的倒三角次序先是generic/generic、generic/media、generic/button然后是elements/document再是objects/container、objects/icons、objects/grid接着是components/heading、components/hero、components/rail、components/footer等一长串组件最后才是utilities/grid-column、utilities/theme、utilities/helpers、utilities/spacing等工具类。而 assets/styles/_core.scss 通过forward统一转发tools/与settings/下的全部文件如tools/maths、tools/functions、settings/config.colors、settings/config.breakpoints、settings/config.eases、settings/config.spacers、settings/config.timings、settings/config.zindexes等成为全站样式可复用的基础层。以settings/_config.breakpoints.scss为例断点变量文档示例中出现的$to-medium即来自这一层以from-*/$to-*语义贯穿全部响应式写法。CSS Naming Convention简化 BEM文档规定使用简化的 BEMBlock, Element, Modifier语法只有三种形态.block—— 块.block_element—— 元素下划线连接.-modifier—— 修饰符前导短横线相比标准 BEM 的双下划线__与双短横线--这里用单个下划线和单短横线配合 SCSS 的嵌套写法更简洁。CSS Namespacing为 UI 类名增加透明度文档为 class 定义了五类命名空间前缀目的是让开发者在阅读类名时立刻知道它的「职责边界」o-Object可在任意无关上下文中复用的对象类。修改它可能波及其他大量无关位置需要谨慎。c-Component具体的、与实现绑定的 UI 组件。对它的样式修改应当能在当前上下文中被察觉且不应产生副作用。u-Utility职责非常单一往往只提供一条声明的工具类。不可绑定业务、不可随意改动可跨任意 UI 复用。s-Scope创建新的样式作用域类似 Theme 但不限于外观。应克制使用滥用会导致 CSS 质量下降。is-/has-表示「当前因某种状态/条件而如此渲染」说明 DOM 上正因某个状态被激活而临时、可选或短暂地附加了样式。仓库中这些前缀随处可见如 views/layouts/base.twig 的html classis-loading使用is-状态类assets/scripts/config.js 中的CSS_CLASS常量定义了is-loading、is-loaded、is-ready、fonts-loaded、c-lazy、-lazy-loaded等其中c-lazy即组件前缀、-lazy-loaded即 BEM 修饰符形态assets/styles/components 目录下_preloader.scss、_rail.scss、_header.scss等均输出c-前缀组件类。Example #1类名体系与 SCSS 嵌套的完整示例文档给出了 HTML 与 SCSS 对照的完整示例直接展示了c-、o-、u-前缀与简化 BEM、响应式修饰符的组合用法div classc-block -large div classc-block_layout o-layout div classo-layout_item u-1/2from-medium div classc-block_heading o-h -mediumHeading/div /div div classo-layout_item u-1/2from-medium a classc-block_button o-button -outline href#Button/a /div /div /div.c-block { .-large { padding: rem(60px); } } .c-block_heading { media (max-width: $to-medium) { .c-block.-large { margin-bottom: rem(40px); } } }几个值得注意的实现细节rem(60px)是tools层提供的尺寸转换函数——assets/styles/tools/_functions.scss 中封装了rem()等函数配合 assets/styles/tools/_maths.scss 完成数学计算。$to-medium来自settings层的断点配置assets/styles/settings/_config.breakpoints.scss而 HTML 中的u-1/2from-medium则是同一套断点语义在工具类上的响应式表达体现了「settings 一处定义、HTML/SCSS 处处引用」的设计。.-large、.-medium、.-outline是 BEM 修饰符形态c-block_heading、o-layout_item是元素形态。Scriptsesbuild modularJS 的模块化脚本体系文档说明JavaScript/ES 模块的打包与压缩由esbuild负责而模块组织则建立在modularJSnpm 包名modujs之上后者是在 ES Modules 基础上的一层轻量框架提供四个核心能力自动初始化可见模块轻松调用其他模块的方法通过事件委托快速设置作用域事件在模块作用域内简单地选择 DOM 元素。仓库的接入方式清晰可见。assets/scripts/app.js 顶部即import modular from modujs并通过import * as modules from ./modules引入全部模块随后const app new modular({ modules })创建实例、app.init(app)完成初始化模块注册表在 assets/scripts/modules.js 中统一导出Load、Rail、Scroll、Randomize、MaskLines、FadeInText、HoverShuffle。每个模块都继承modujs的module基类并实现init()/destroy()生命周期。构建层面package.json 的 scripts 使用node --experimental-json-modules --no-warnings build/watch.js开发与build/build.js构建由自定义任务运行器调用 esbuild 完成打包压缩esbuild 还负责将process.env.NODE_ENV按环境替换assets/scripts/config.js 头部注释引用了 esbuild 官方文档对这一替换行为的说明从而支持ENV.IS_DEV/ENV.IS_PROD之类的环境分支。Example #2modularJS 模块的完整写法文档给出了一个典型的 modularJS 模块示例HTML 中用data-module-example声明模块根节点内部用data-example声明具名作用域节点JS 中通过this.events声明事件委托点击[data-exampleload]触发loadMore通过this.$(main)在模块作用域内取节点div>import { module } from modujs; export default class extends module { constructor(m) { super(m); this.events { click: { load: loadMore } }; } loadMore() { this.$(main)[0].classList.add(is-loading); } }仓库中的 assets/scripts/modules/Scroll.js 是该模式的真实范本构造函数中绑定this.onScrollBind、this.changeHeaderThemeBindinit()中创建 Locomotive Scroll 实例并绑定事件destroy()中调用this.unbindEvents()与this.scroll.destroy()onScroll回调中通过this.call(onScroll, { velocity, direction }, Rail)把滚动数据传递给 Rail 模块——这正是文档所述「轻松调用其他模块方法」能力的落地。Page transitionsmodularLoad 页面切换与懒加载文档说明页面过渡动画与懒加载由modularLoad承担。其工作方式是通过data-load-container声明容器、data-load声明带过渡名称的链接、data-load-src声明懒加载资源nav a href/Home/a a href/page>import modularLoad from modularload; this.load new modularLoad({ enterDelay: 300, transitions: { transitionName: { enterDelay: 450 } } });配置项中顶层enterDelay: 300为所有过渡的默认进入延迟transitions内可按过渡名覆盖如transitionName单独设为450。样板工程的真实接入位于 assets/scripts/modules/Load.jsinit()中创建new modularLoad({ enterDelay: 0, transitions: { customTransition: {} } })并监听loaded事件——当一次页面切换完成后在回调里执行this.call(destroy, oldContainer, app)销毁旧容器内的模块、this.call(update, newContainer, app)初始化新容器内的模块从而保证页面切换后滚动、视差等交互模块都能正确重建。与之对应的模板结构在 views/layouts/base.twig 中body>div>import LocomotiveScroll from locomotive-scroll; this.scroll new LocomotiveScroll({})仓库对 Locomotive Scroll 的接入具有源码级证据滚动容器声明data-module-scrollmain出现在 views/layouts/base.twig 中作为 modularJS 的 Scroll 模块根节点。真实初始化在 assets/scripts/modules/Scroll.js 的init()中new LocomotiveScroll({ modularInstance: this, scrollCallback: this.onScrollBind })—— 传入 modularJS 实例以支持跨模块通信并注册滚动回调。回调数据结构onScroll({ scroll, limit, velocity, direction, progress })解构出滚动位置、极限值、速度、方向与整体进度Scroll 模块据此计算this.scrollDirection向html添加/移除is-scrolling-up状态类并把{ velocity, direction }通过this.call(...)转交给 Rail 模块驱动跑马灯视差详见 assets/scripts/modules/Rail.js 的onScroll方法。常用 APIscrollTo(target, options)Scroll 模块的scrollTo方法中对duration等选项做了默认值合并、addScrollElements($newContainer)/removeScrollElements($oldContainer)用于观察/取消观察新进入 DOM 的滚动元素配合页面切换后调用、destroy()在模块销毁时清理。值得一提的细节是Scroll.js 中import LocomotiveScroll from ../../../../lib/index直接引用仓库内的库源码目录 packages/lib含 index.ts、core/Core.ts、core/IO.ts、core/ScrollElement.ts、core/types.ts等即 landing 站点运行的是与 npm 包同源的本地实现而非单独安装的外部副本便于在样板工程中直接调试库行为。延伸阅读围绕本文主题可以继续深入以下仓库文档与源码packages/landing/README.md样板工程的特性清单、环境要求Node ≥ 17.9 / NPM ≥ 8.0当前 package.json engines 为 node ≥ 20.1、npm start/npm run build等命令。packages/landing/docs/development.md自定义任务运行器与资源构建流程。packages/landing/docs/grid.md与本文o-layout、u-1/2from-medium配套的自定义栅格系统。packages/landing/assets/styles/main.scss 与 packages/landing/assets/styles/_core.scssITCSS 分层的实际落地。packages/landing/assets/scripts/app.js、assets/scripts/modules.jsmodularJS 实例化与模块注册。packages/landing/assets/scripts/modules/Scroll.js、assets/scripts/modules/Load.js、assets/scripts/modules/Rail.js滚动、页面切换与视差模块的完整实现。packages/libLocomotive Scroll 库的 TypeScript 源码Core、IO、ScrollElement、types可对照data-scroll、data-scroll-speed等属性的底层解析逻辑。赞分享【免费下载链接】locomotive-scroll Detection of elements in viewport smooth scrolling with parallax.项目地址https://gitcode.com/gh_mirrors/lo/locomotive-scroll点击查看免费下载相关推荐Locomotive Astro Boilerplate 实战指南在 Astro 5 中集成 Locomotive Scroll 实现平滑滚动与视差Locomotive Astro Boilerplate 实战指南在 Astro 5 中集成 Locomotive Scroll 实现平滑滚动与视差 导读 pESP32物联网开发终极指南解锁Arduino生态下的无限可能ESP32物联网开发终极指南解锁Arduino生态下的无限可能 Arduino ESP32核心库是连接Arduino生态与Espressif ESP32系列芯嵌入式物联网驱动开发Locomotive Scroll 属性Attributes完整指南data-scroll 系列声明式滚动与视口检测实战Locomotive Scroll 属性Attributes完整指南data scroll 系列声明式滚动与视口检测实战 本文是 Locomotive S上一篇终极指南如何在Linux桌面无缝运行Android应用容器技术下一篇三步掌握B站视频下载神器BilibiliDown终极使用指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考