当前位置：首页 > news >正文

lenis滑动插件的笔记

news 来源：原创 2025/7/16 20:54:59

官网

lenis - npm

方法一：基础判断（推荐）

通过 Lenis 自带的 scroll 和 limit 属性直接判断：

const lenis = new Lenis()// 滚动事件监听
lenis.on('scroll', ({ scroll, limit }) => {const distanceToBottom = limit - scrollconst threshold = 100 // 距离底部100px触发if (distanceToBottom < threshold) {console.log('接近底部')// 执行加载更多等操作}
})

方法二：动态内容适配

当页面内容动态增加时，需要 重置 Lenis 的尺寸计算：

// 加载新内容后调用
function loadMoreData() {fetch('/api/data').then(() => {// 1. 插入新内容到DOM// 2. 通知Lenis重新计算lenis.resize() // 关键方法})
}// 在滚动监听中
lenis.on('scroll', ({ scroll, limit }) => {if (limit - scroll < 100) {loadMoreData()}
})

方法三：精确计算模式

针对复杂布局（如存在浮动元素、position: sticky 等）：

function isBottom() {// 获取 Lenis 的滚动容器const wrapper = lenis.wrapperElement || document.documentElement// 精确计算可滚动范围const actualLimit = wrapper.scrollHeight - wrapper.clientHeightconst currentScroll = lenis.scrollreturn currentScroll >= actualLimit - 1 // 消除计算误差
}// 使用示例
if (isBottom()) {console.log('精确到达底部')
}

⚠️ 注意事项

性能优化
在滚动事件中使用防抖（建议直接使用 Lenis 的 RAF 机制）：

function checkBottom() {if (lenis.isScrolling) return // 滚动中不检测// 检测逻辑
}

移动端适配
兼容触摸屏惯性滚动

lenis.on('scroll', ({ scroll, limit, velocity }) => {if (velocity > 0.1 && limit - scroll < 500) {// 快速滑动时提前加载}
})

方向判断
只在下滑时检测：

let lastScroll = 0
lenis.on('scroll', ({ scroll }) => {const isScrollingDown = scroll > lastScrolllastScroll = scrollif (isScrollingDown && isBottom()) {// 处理底部逻辑}
})

完整示例（React 版）

import { useEffect, useRef } from 'react'
import Lenis from '@studio-freight/lenis'function App() {const lenisRef = useRef()useEffect(() => {const lenis = new Lenis()lenisRef.current = lenisconst checkBottom = () => {const { scroll, limit } = lenisif (limit - scroll < 100) {console.log('触发加载')// 此处执行加载逻辑}}const raf = (time) => {lenis.raf(time)checkBottom()requestAnimationFrame(raf)}requestAnimationFrame(raf)return () => lenis.destroy()}, [])return (<div>{/* 页面内容 */}</div>)
}

回调函数中的实参limit

关键特性

动态计算

Lenis 的阻尼效果会使实际滚动值略微超过 limit，但最终会回弹到 limit 值：

3. 边界缓冲

当页面高度变化时（例如加载更多内容），需手动调用 lenis.resize() 更新：
```
// 加载新内容后
document.body.appendChild(newContent)
lenis.resize() // 重新计算 limit
```
方向差异
垂直滚动: limit = scrollHeight - innerHeight
水平滚动: limit = scrollWidth - innerWidth（需配置 Lenis 为横向滚动）

// 启用阻尼效果后
console.log(lenis.isScrolling) // 当滚动超过 limit 时为 true

应用场景

1. 无限滚动加载

lenis.on('scroll', ({ scroll, limit }) => {if (limit - scroll < 100) {loadMoreContent()}
})

返回顶部按钮

const showButton = scroll > 0.3 * limit

进度指示器

const progress = Math.min(scroll / limit, 1)

对比原生属性

场景	原生方法	Lenis 方法	优势
静态页面	`window.scrollY` + `scrollHeight` 计算	直接使用 `limit`	无需手动计算
动态加载内容	需监听 DOM 变化并重新计算	调用 `resize()` 即可	自动处理复合滚动容器
有 transform 的容器	可能计算错误	结果准确	正确处理 CSS transform 和复杂布局
横向滚动	需单独处理 `scrollWidth`	统一使用 `limit`	代码逻辑一致

六、特殊案例处理

存在 `position: sticky` 元素

// 手动补偿 sticky 元素高度
const stickyElement = document.querySelector('.sticky')
const adjustedLimit = limit - stickyElement.offsetHeight

多滚动容器

如果 Lenis 被配置为控制某个子容器：

const lenis = new Lenis({wrapper: document.getElementById('custom-scroll-container'),content: document.getElementById('custom-content')
})// 此时 limit 对应的是容器内部的滚动极限

通过理解 limit 的含义和使用场景，可以更高效地开发与滚动相关的交互功能，同时避免手动计算滚动边界的繁琐操作。

lenis滑动插件的笔记

官网 lenis - npm 方法一：基础判断（推荐） 通过 Lenis 自带的 scroll 和 limit 属性直接判断： const lenis new Lenis()// 滚动事件监听 lenis.on(scroll, ({ scroll, limit }) > {const distanceToBottom limit - scroll…...

编程日记 2025/7/16 20:54:59

【网络安全】SQL注入

如果文章不足还请各位师傅批评指正！ 想象一下，你经营着一家咖啡店，顾客可以通过店内的点单系统下单。这个系统会根据顾客的输入，向后厨发送指令，比如“为顾客A准备一杯拿铁”。然而，如果有个不怀好意的顾客…...

编程日记 2025/7/16 20:42:20

window server 2012安装sql server2008 r2

执行sql server2008 r2安装目录下的setup 选择运行程序而不获取帮助然后就是让人绝望的只能先搞这个了，F*微软，自家软件不让正常安装打开服务器管理器->添加角色和功能->选择Web 服务（IIS）->添加.NET Framework3.5 然…...

编程日记 2025/7/16 20:50:25

uni-app学习笔记五--vue3插值表达式的使用

vue3快速上手导航：简介 | Vue.js 模板语法插值表达式最基本的数据绑定形式是文本插值，它使用的是“Mustache”语法 (即双大括号)： <span>Message: {{ msg }}</span> 双大括号标签会被替换为相应组件实例中 msg 属性的值。同…...

编程日记 2025/6/29 5:00:01

RuoYi 中使用 PageUtils.startPage() 实现分页查询的完整解析

文章目录一、PageHelper 简介与基本用法使用方式如下： 二、Mapper 接口返回类型对分页的影响1. 返回 Page<T> 类型（推荐）2. 返回 List<T> 类型（不推荐） 三、解析RuoYi 是如何使用 PageUtils.startPage()1…...

编程日记 2025/7/16 20:06:14

【番外】02：Windows 编译带 DNN_CUDA 功能的 OpenCV 动态链接库

文章目录 1. 环境准备2. 兼容性说明3. 算力查询4. 编译步骤5. 网盘资料提示： 如果读者因网络环境受限，无法正常下载与本文相关的软件安装包、压缩包，以及编译时的依赖文件，可以从文章最后提供的网盘链接下载资源。 1. 环境准备 …...

编程日记 2025/6/29 1:36:31

Java详解LeetCode 热题 100(14):LeetCode 56. 合并区间（Merge Intervals）详解

文章目录 1. 题目描述2. 理解题目3. 解法一：排序一次遍历法3.1 思路3.2 Java代码实现3.3 代码详解3.4 复杂度分析3.5 适用场景 4. 解法二：双指针法4.1 思路4.2 Java代码实现4.3 代码详解4.4 复杂度分析4.5 与解法一的比较 5. 解法三：TreeMa…...

编程日记 2025/7/16 20:35:06

回答 | 图形数据库neo4j社区版可以应用小型企业嘛？

刚在知乎上看到了一个提问，挺有意思，于是乎，贴到这里再简聊一二。转自知乎提问当然可以，不过成本问题不容小觑。另外还有性能上的考量。就在最近，米国国家航空航天局——NASA因为人力成本问题，摒弃了使…...

编程日记 2025/7/16 20:29:21

2024年北理工Python123第六章测验题整理

测验题一般不会太难，但是这次的题目，未免太多了，有的还很难一、选择题二、编程题 1-10 列表和字符串 1-10都是和列表、字符串有关的题目，都很简单,我直接给出代码了 1.列表排序输出 import random random.seed(int(input()…...

编程日记 2025/6/29 1:36:20

常用的设计模式详解

常用的设计模式详解在后端开发中，设计模式是提升代码可维护性、扩展性和灵活性的关键工具。通过合理应用设计模式，开发者能够高效解决复杂问题并优化系统架构。本文将结合实际案例，深入探讨后端开发中常用的设计模式及其核心应用场景。一、…...

编程日记 2025/6/29 2:36:51

OFCMS代码审计-freemaker注入sql注入xxexss文件上传

环境搭建下载地址：https://gitee.com/oufu/ofcms/repository/archive/V1.1.2?formatzip SSTI模板注入（freemaker) FreeMarker模板注入实现远程命令执行 - Eleven_Liu - 博客园在admin中找到这个发现请求的是这个找到他 <#assign value"f…...

编程日记 2025/7/16 20:30:34

python与nodejs哪个性能高

在一般的Web开发和高并发场景中，Node.js的性能通常优于Python，特别是在处理大量异步任务和实时应用时更具优势；而在数据分析、机器学习及计算密集型任务中，Python则表现出更高的性能优势。 Node.js以事件驱动的非阻塞I/O模型著称&…...

编程日记 2025/7/9 23:57:23

云平台管理部署知识点——问题＋答案

1、在k8s 中定义副本数量的关键字是那个？处于那个模块下？ 关键字：replicas 模块：spec下 2、在k8s中，有状态应用和无状态应用的区别？创建有状态和无状态应用分别使用哪种资源对象类型？ &#…...

编程日记 2025/7/16 20:39:00

数据结构（六）——树和二叉树

一、树和二叉树的定义与存储 1.树的定义树是一种非线性的数据结构，它是由n个有限结点组成有层次关系的集合树具有以下特点： （1）每个结点具有0个或多个子结点 （2）每个子结点只有一个父结点 &#xff…...

编程日记 2025/7/16 20:25:54

基于构件的开发方法与传统开发方法的区别

在软件开发领域，基于构件的开发方法和传统开发方法有着截然不同的特点与应用效果，这些差异显著影响着项目的实施过程与最终成果。下面，我们将从多个关键维度展开对比分析。一、开发模式：线性搭建与模块组装传统开发方法遵循线性的、自顶向下的流程，就像搭建一座高楼…...

编程日记 2025/7/16 20:52:47

cursor对话关键词技巧

提示词基本结构与原则一个好的 Cursor 提示词通常包含三个部分：目标说明上下文信息具体要求。例如： 创建一个React登录组件，使用Tailwind CSS样式，需要包含邮箱验证功能和记住密码选项。效果演示： 提示词的的…...

编程日记 2025/7/16 20:15:28

克隆虚拟机组成集群

一、克隆虚拟机 1. 准备基础虚拟机确保基础虚拟机已安装好操作系统（如 Ubuntu）、Java 和 Hadoop。关闭防火墙并禁用 SELinux（如适用）： bash sudo ufw disable # Ubuntu sudo systemctl disable firewalld # CentO…...

编程日记 2025/7/16 13:13:45

一.代码开发购物车属于用户端功能，因此要在user下创建controller代码。 Controller层 package com.sky.controller.user;import com.sky.dto.ShoppingCartDTO; import com.sky.entity.ShoppingCart; import com.sky.result.Result; import com.sky.service.Shopp…...

编程日记 2025/6/29 1:39:14

2094. 找出 3 位偶数

from typing import Listclass Solution:def findEvenNumbers(self, digits: List[int]) -> List[int]:# 统计 digits 中每个数字（0-9）的出现次数。cnt [0] * 10for d in digits:cnt[d] 1ans []# i0 百位，i1 十位，i2 个位&a…...

编程日记 2025/7/13 9:37:28

外出充电不发愁，倍思便携式移动电源成出行新宠

电子设备已深度融入现代快节奏生活，成为出行必备。但随之而来的电量焦虑，却始终困扰着人们。无论是出差远行、户外探索，还是每日通勤，如何随时为设备充电，成了亟待解决的难题。倍思极客充伸缩数据线充电宝应运而生&…...

编程日记 2025/7/16 20:13:35

防火墙安全策略基础配置

拓朴图设备基础配置 # AR1 路由器配置 [Huawei]interface GigabitEthernet0/0/0 [Huawei-GigabitEthernet0/0/0]ip address 1.1.1.2 255.255.255.0 [Huawei]ip route-static 192.168.1.0 255.255.255.0 1.1.1.1# FW1 防火墙配置 [USG6000V1]sysname FW1 [FW1]interface Gigab…...

编程日记 2025/6/29 3:34:41

系统架构-通信系统架构设计

通信网络系统架构局域网单一机构所拥有的专用计算机网络局域网从早期只提供二层交换功能的简单网络发展到现在，还提供三层路由功能的复杂网络局域网的典型架构风格： 单核心架构：由一台核心二层或三层交换设备充当网络的核心设备&…...

编程日记 2025/7/16 20:33:55

2.3 定积分

一、数学定义与核心公式核心思想： 定积分是通过无限细分区间、累加微小矩形面积来逼近曲边图形面积的数学工具。其本质是极限过程下的误差控制与动态平衡。公式与符号解析： 表达式：定积分写作 ∫ₐᵇ f(x)dx，表示在区间 [a, …...

编程日记 2025/7/16 20:17:06

TCPIP详解卷1协议八 ICMPv4和ICMPv6 Internet控制报文协议

8.1——ICMPv4和ICMPv6 Internet控制报文协议 IP 协议本身并没有为终端系统提供直接的方法来发现那些发往目的地址失败的IP数据包。此外，IP 没有提供直接的方式来获取诊断信息（例如，哪些路由器在沿途中被使用了或使用一种方法来估计往返时间…...

编程日记 2025/7/16 20:40:08

ik 分词器设置自定义词典

进入 ES 的安装目录，进入 /elasticsearch-8.10.0/plugins/ik/config/ 文件夹目录，打开 IKAnalyzer.cfg.xml 文件进行配置。一、添加自定义扩展词典扩展词：就是不想哪些词分开，让他们成为一个词，比如“蒙的全是对…...

编程日记 2025/7/16 20:53:52

RabbitMQ 工作模式

RabbitMQ 一共有 7 中工作模式，可以先去官网上了解一下（一下截图均来自官网）：RabbitMQ 官网 Simple P：生产者，要发送消息的程序；C：消费者，消息的接受者；hell…...

编程日记 2025/7/16 20:17:05

sqlmap使用入门

sqlmap加速了sql注入的发展，需要掌握6点，其一是--dbs获得数据库名称，其二是-D 数据库名称 --tables 获得数据库中的所有表名，其三是-D 数据库名 -T 表名 -C 字段1,字段2 --dump 获得数据库中的表中的字段的值，其四是-r…...

编程日记 2025/6/29 3:21:34

C++23 中的 views::stride：让范围操作更灵活

文章目录什么是 views::stride语法与用法参数与返回值实现细节适用场景编译器支持总结什么是 views::stride views::stride 是 C23 引入的一个范围适配器。它允许我们从一个范围中以固定步长提取元素，从而生成一个新的范围视图。具体来说，给定一个范围…...

编程日记 2025/7/16 20:05:07

OSI 7层模型

OSI 7层模型： 1、物理层（光纤等把电脑连接起来的物理手段） 2、数据链路层（以太网，确认0和1电信号的分组方式，负责MAC地址，MAC地址用于在网络中唯一标示一个网卡，相当于网卡的身份证…...

编程日记 2025/6/29 2:23:33

向量组的维度是单个向量中元素的个数

在线性代数中，向量组的维数通常指的是单个向量中元素的个数，即每个向量的维度（dimension）。例如，一个由三维几何向量（如 ( x , y , z ) (x, y, z) (x,y,z)）组成的向量组，其维数是3&…...

编程日记 2025/7/16 20:26:58

VM中 ubuntu 网卡不显示

1.添加网卡配置 #sudo nano /etc/netplan/01-netcfg.yaml network:version: 2renderer: networkdethernets:ens33:dhcp4: trueens37:dhcp4: trueens38:dhcp4: true#保存后 sudo netplan apply2.查看网络状态 sudo systemctl start systemd-networkd sudo systemctl status sy…...

编程日记 2025/7/16 20:12:20

Scratch基础-运动模块详解

一、本次任务二、内容详解 1）点位坐标知识 1、什么是坐标？ 答： 坐标是定位位置的数字，大家进教室是不是都有自己的座位？比如第3排第2列？这就像Scratch舞台的坐标，每个角色都有自己的‘座位号’…...

编程日记 2025/6/29 1:36:35

dp自动化登陆之hCaptcha 验证码

hCaptcha 是一种常见的验证码服务，用于区分人类用户和自动化程序。由于其基于图像识别和行为分析，下面介绍如何使用自动化点击验证码完成登陆。思路：登陆目标网站触发验证码，截图并发给打码平台返回坐标，模拟人工点击…...

编程日记 2025/6/29 1:36:33

【002】renPy android端启动流程分析

接上篇分析 org.renpy.android.PythonSDLActivity#onCreate它先调用了 org.libsdl.app.SDLActivity#onCreate 源码如下： Override // android.app.Activity protected void onCreate(Bundle bundle0) {//1. 日志记录String s;Log.v("SDL", "Dev…...

编程日记 2025/6/29 1:40:45

基于注意力机制与iRMB模块的YOLOv11改进模型—高效轻量目标检测新范式

随着深度学习技术的发展，目标检测在自动驾驶、智能监控、工业质检等场景中得到了广泛应用。针对当前主流目标检测模型在边缘设备部署中所面临的计算资源受限和推理效率瓶颈问题，YOLO系列作为单阶段目标检测框架的代表，凭借其高精度与高速度的…...

编程日记 2025/6/29 1:36:42

suricata增加单元测试编译失败

一、环境 $ lsb_release -a No LSB modules are available. Distributor ID: Ubuntu Description: Ubuntu 22.04.5 LTS Release: 22.04 Codename: jammysuricata: suricata7.0.5 IDE: vscode 二、背景在suricata中开发了某个功能后，增加unittest时，…...

编程日记 2025/6/29 1:36:32

如何查看电脑处理器配置电脑处理器查看方法

电脑处理器（CPU）直接影响着电脑的运行速度和响应能力，无论是进行日常办公、娱乐，还是玩大型游戏，处理器的性能都至关重要。那么，电脑cpu在哪里看呢？本文将为你介绍几种简单的方法，帮…...

编程日记 2025/6/29 1:36:38

idea查看pom文件依赖

IDEA中查看依赖树的插件很方便能够分析源码中引入的注解是来自哪个jar包的...

编程日记 2025/6/29 4:58:40

图形化编程平台的破局之道：从工具同质化到生态差异化

一、同质化困局的底层逻辑剖析在全球图形化编程市场中，工具功能趋同已成为行业共识。据 Statista 2024 年数据显示，主流平台的基础功能重合度高达 78%，核心模块（如条件判断、循环结构）的实现方式高度相似。这种现象的…...

编程日记 2025/6/29 4:43:23

Spring Boot动态配置修改全攻略

精心整理了最新的面试资料和简历模板，有需要的可以自行获取点击前往百度网盘获取点击前往夸克网盘获取无需重启应用，实时更新配置的终极指南在微服务架构中，动态配置管理是提高系统灵活性的关键技术。本文将通过4种主流方案&#xff0c…...

编程日记 2025/6/29 3:36:11

基于STM32、HAL库的DPS368XTSA1气压传感器驱动程序设计

一、简介： DPS368XTSA1 是 InvenSense（TDK 集团旗下公司）生产的一款高精度数字气压传感器，专为需要精确测量气压和温度的应用场景设计。它具有超低功耗、高精度、快速响应等特点，非常适合物联网、可穿戴设备和无人机等应用。二、硬件接口： DPS368XTSA1 引脚STM32L4XX 引…...

编程日记 2025/6/29 4:57:17

VMware虚拟机实例-docker启动失败

DOCKER启动失败错误消息 [rootlocalhost docker]# yum install docker......[rootlocalhost docker]# systemctl start dockerFailed to start docker.service: Unit is masked. 错误原因 # /var/log/messagesMay 12 18:14:04 localhost systemd: Started Session 11 of user…...

编程日记 2025/6/29 1:36:34