ios，Windows 网页皆可平滑、惯性滚动（Smooth-scroll.js）- 博客、网站、web、JavaScript

发表于2022-03-16|更新于2024-05-05|javaScript

|总字数:362|阅读时长:1分钟|浏览量:

平时使用桌面端设备滚动网页时总是戛然而止，不丝滑。那么今天这个 smooth-scroll.js库将在你的网站上使用德芙，纵享丝滑

惯性滚动？

惯性滚动最早出现在 ios 系统中，是指当用户在终端上滑动页面然后把手指挪开，页面不会麻黄素那个停下来而是继续保持一定时间的滚动效果，并且滚动的速度和持续的时间是与滑动手势的强烈程度成正比

在 css 中有一条支持惯性滚动的 非标准且仅 ios 设备支持的属性：-webkit-overflow-scrolling: touch;
当然该属性也有坑的，不列出来了：指路

示例：H5 普通长列表在 iOS 系统下（开启了滚动回弹）的滚动表现

js 模拟惯性滚动

想要兼容性好那必须是 js 啦，该库是在浏览网站时发现的一段 js，但是在 npm 上未发现，所以分享下。
该库一旦引入所有元素滚动皆为惯性滚动

demo

Npm: https://www.npmjs.com/package/smooth-scrolling.js

文章作者: kshao

文章链接: https://ksh7.com/posts/smooth-scroll/

版权声明: 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来源 kshao-blog-前端知识记录！

赞助

微信
支付宝

相关推荐

npm、yarn、pnpm 设置最新国内镜像源（附官方镜像源和最新阿里源），以及 nrm 的使用教程

阿里最近（指的是 2022 年~~ 哈哈）更换了淘宝镜像的域名，原域名的 SSL 证书已经过期了（2024/01/22），最近使用旧淘宝镜像的应该都遇到 Error: certificate has expired 了吧，遇到了可以看下这个解决方案~ npm查询源npm get registry 设置源# 国内淘宝镜像源 npm config set registry https://registry.npmmirror.com/ # 官方镜像源 npm config set registry https://registry.npmjs.org/ pnpm pnpm 的镜像源默认查询源pnpm get registry 设置源# 国内淘宝镜像源 pnpm config set registry https://registry.npmmirror.com/ # 官方镜像源 pnpm config set registry https://registry.npmjs.org/ yarn查询源yarn config get...

【npm】npm ci - npm clean install，在 CI、CD 中保持构建的一致性和可重复性

什么是 npm cinpm ci 与 npm install 类似，主要用于 CI、CD 等自动化环境中，来确保每次安装的依赖项都是相同的。 npm ci 依赖于 package-lock.json 或 npm-shrinkwrap.json，安装之前会删除 node_modules 文件夹（如果存在），若 package-lock.json 中的依赖与 package.json 不一致 npm ci 将会报错退出。与 npm install 区别处理 package-lock.json运行 npm ci 必需要 package-lock.json 或 npm-shrinkwrap.json，且不会更新锁文件。在安装时会完全按照 lock 文件版本，若与 package.json 中的版本不匹配则报错。删除 node_modulesnpm ci 开始安装之前会移除 node_modules（若存在）安装依赖npm ci 只能一次安装整个项目，不支持安装单个依赖。如果你的 package-lock.json 是使用...

一文吃透 pnpm 如何使用 workspace 构建 monorepo，与 npm、yarn 的用法对比（pnpm 9.x 内部安装依赖问题 link-workspace-packages）

环境与版本 platform => mac os node => v22.2.0 npm => 10.8.0 pnpm => 9.1.3 yarn => 1.22.22 名词解释monorepo利用单一仓库来管理多个 packages 的一种策略，如早期的 lerna workspace由上述单仓多包催生的管理方式，workspace（工作空间）是 npm、yarn、pnpm 等包管理工具提供的一种特性，用于管理多个包的依赖关系。合理配置 workspace 后，包之间互相依赖不需要使用 npm link，将在 install 时中处理在 pnpm 中使用 workspaceA workspace must have a pnpm-workspace.yaml file in its root. A workspace also may have an .npmrc in its root.如文档描述，启用 pnpm 的 workspace 需要在项目根目录创建...

解决 npm、cnpm 或 pnpm install 遇到 certificate has expired （证书已过期）

书接上回~ 前言由于种种原因，大家在使用 npm 或其他包管理工具时，都会更换其默认镜像源，例如：taobao 来提高效率。虽然早在 2022年时淘宝发布了更换镜像地址的公告，直至 2024/01/22 SSL 证书过期前服务都是可用的。由于 npm 默认开启了 ssl 验证，你可以选择关闭该项服务（不推荐，仅建议使用内部源时）或者更换正确的镜像源。方案更换镜像源（推荐）更多方法点击链接查看 > > > npm查询源npm get registry 设置源# 国内淘宝镜像源 npm config set registry https://registry.npmmirror.com/ # 官方镜像源 npm config set registry https://registry.npmjs.org/ 关闭 SSL 验证（不推荐）理论设置 npm 的即可，pnpm 同理 # 关闭 npm config set strict-ssl false # 恢复 npm config set...

评论

数据加载中