jQuery/JavaScript中的自定义滚动条数学 [英] Custom Scrollbar Maths in jQuery / JavaScript
问题描述
我目前正在一个项目中，该项目使用一个自定义滚动插件(由我编写)来允许元素在触摸设备以及桌面浏览器中滚动.一切正常(包括iOS的速度和减速度).
I am currently working on a project which uses a custom scroll plugin (written by me) to allow an element to be scrolled in touch devices, as well as desktop browsers. Everything is working correctly (including velocity and deceleration a la iOS).
但是，唯一剩下的问题是在用户滚动时计算滚动条的顶部(或左侧)位置.我已经使用以下公式计算了滚动条的高度:
However, the only problem that remains is calculating the top (or left) position of the scrollbar when a user scrolls. I have calculated the height of the scrollbar with the following formular:
Math.round((container.height() / content.height()) * 100);
这似乎可以计算出正确的条形高度，但是现在我需要一个公式来确定用户滚动时滚动条的位置应移动多少.我已经通过Google进行了检查，但没有找到太多用处，因此还在SO上进行了搜索，并欢迎提出任何意见.
This seems to compute the correct height of the bar, but now I need a formular to work out by how much the scrollbar's position should be moved when the user scrolls. I have checked through Google and wasn't able to find much of use, and also searched here on SO and would welcome any comments.
我在公式中可以使用以下数据:
I have the following data available for use in the formula:
- 容器高度
- 内容高度
- 当前滚动位置(
scrollTop) - 滚动条的高度
- Container height
- Content height
- Current scroll position (
scrollTop) - Height of scrollbar
推荐答案
滚动条的位置应通过以下公式计算:
position of the scrollbar should be calculated by this formula:
Math.round((scrollbar.height * scrollTop / content.height());
这篇关于jQuery/JavaScript中的自定义滚动条数学的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
