jQuery / JavaScript 中的自定义滚动条数学

Custom Scrollbar Maths in jQuery / JavaScript

本文关键字：滚动条 自定义 JavaScript jQuery      更新时间：2023-09-26

我目前正在开发一个项目，该项目使用自定义滚动插件（由我编写）来允许元素在触摸设备和桌面浏览器中滚动。一切正常（包括 iOS 的速度和减速）。

但是，剩下的唯一问题是在用户滚动时计算滚动条的顶部（或左侧）位置。我使用以下公式计算了滚动条的高度：

Math.round((container.height() / content.height()) * 100);

这似乎可以计算出栏的正确高度，但现在我需要一个公式来计算用户滚动时滚动条的位置应该移动多少。我已经通过谷歌检查过，找不到太多有用的东西，也在这里搜索了SO，欢迎任何评论。

我有以下数据可用于公式：

  • 集装箱高度
  • 内容高度
  • 当前滚动位置 （ scrollTop ）
  • 滚动条的高度

滚动条的位置应由以下公式计算：

Math.round((scrollbar.height * scrollTop / content.height());
相关文章：