list滚动条Scroll 偏移和长度计算公式总结

最新推荐文章于 2024-12-01 20:25:25 发布
原创 最新推荐文章于 2024-12-01 20:25:25 发布 · 3.5k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#scroll #list

本文总结了滚动条在列表中偏移及长度的计算方法。主要包括两部分：一是如何计算滚动条当前的偏移位置；二是如何计算滚动条的拇指高度。这些公式有助于开发者更好地理解和控制滚动条的行为。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

list滚动条Scroll 偏移和长度计算公式总结

A.计算偏移:

偏移/list窗口高度 = 目前总偏移/所有listitem高度总和

即：
偏移 = (目前总偏移 *  list窗口高度 ) / 所有listitem高度总和

B.计算Scroll拇指高度

所有listitem高度总和 / list窗口高度 = pageCnt

Scroll拇指高度 = list窗口高度 /  pageCnt

即：
Scroll拇指高度 = (list窗口高度 * list窗口高度) / 所有listitem高度总和

自定义滚动条的实现思路与关键算法
weixin_34006468的博客
05-20 1372
在web开发中，自定义滚动条是个常见的需求，虽然浏览器原生的滚动条很强大并且在大多数场景下表现的很好，但某些时候我们仍然希望修改他的样式，比如变细一点，或者去掉圆角和轨道，又或者隐藏他们。这些都属于自定义行为，本篇文章将介绍自定义滚动条的几种实现思路，并着重讲解最流行的js方案。上图是自定义的效果（视频在转换时降速了，其实非常快）在正文开始前，我们先统一滚动条各个部分的名称。一、实现思路实现自定义...
【鸿蒙开发】ArkUI滚动类组件-Scroll、Scroller
huchenghe2的博客
11-15 1169
(scroller?scroller：给Scroll绑定一个滚动控制器，该控制器可以控制子组件的各种滚动能力，Scroller目前只支持绑定到Scroll和List。Scroll() {Text('Text1')// 子组件的高度小于Scroll高度，不会触发滚动scrollable：设置Scroll的滚动方向，提供了以下 3 种滚动方向：Vertical（默认值）：仅支持竖直方向滚动。Scroll() {// Scroll没有设置滚动方向，默认竖直方向滚动Column() {
Scroll位置计算
weixin_30547797的博客
08-26 272
thumb可滚动的长度track_len:等于整个滚动条长度减去两个滚动条上的按钮: track_len = scrollbar_len - scroll_buttion_len * 2 thumb的长度: thumb_len / track_len = si.page / (si.max-si.min); 为安全起见，一般写成 thumb_len / track_len = s...
滚动条算法
AS3
02-07 370
[code="java"]package { import flash.display.Sprite; import flash.events.MouseEvent; import flash.geom.Rectangle; import flash.text.TextField; import flash....
标准滚动条算法
weixin_33971130的博客
11-15 671
#define MINSIZE 20 OnSize(O,G,D,H) { if (H>D) { if ((H-O)<D) { O=H-D SetViewOffset(-O) } 由 B:G=D:H 得 B=GD/H if (B<MINSIZE) B=MINS...
关于鸿蒙开发中滚动容器Scroll的介绍
qq_45569925的博客
08-17 2048
当子组件的布局尺寸超过Scroll的尺寸时，内容可以滚动。
鸿蒙NEXT版实战开发：UI框架-如何实现Scroll、List单边回弹效果?
最新发布
qq_39652397的博客
12-01 386
如何实现Scroll、List单边回弹效果.......
鸿蒙Next开发：List组件控制实现视频卡片和列表区域联动滚动总结
DMZDAMS的博客
07-31 1332
向上滑动列表，页面向上滚动到末尾后隐藏视频，继续向上滑动，卡片吸顶，列表开始滚动，列表滚动到底触发回弹效果。
HarmonyOS ArkUI滚动类组件-Scroll、Scroller
m0_70748458的博客
05-31 2137
(scroller?scroller：给Scroll绑定一个滚动控制器，该控制器可以控制子组件的各种滚动能力，Scroller目前只支持绑定到Scroll和List。Scroll() {Text('Text1')// 子组件的高度小于Scroll高度，不会触发滚动scrollable：设置Scroll的滚动方向，提供了以下 3 种滚动方向：Vertical（默认值）：仅支持竖直方向滚动。Scroll() {// Scroll没有设置滚动方向，默认竖直方向滚动Column() {
VS2010 C++学习（1）：滚动条的设计总结程序
05-13
VS2010 C++学习（1）：滚动条的设计总结程序
计算一个滚动列表滚动到具体的位置
cs840610862的博客
01-10 887
比如下面一段代码 &amp;amp;lt;div class=&amp;quot;scroll-container&amp;quot;&amp;amp;gt; &amp;amp;lt;div class=&amp;quot;list-container&amp;quot;&amp;amp;gt; &amp;amp;lt;span class=&amp;quot;item1&amp;quot;&a
滚动条ScrollBar
qq_206720162的博客
11-20 480
界面控件 - 滚动条ScrollBar（对滚动条消息和鼠标消息结合讲的不错） 界面是人机交互的门户，对产品至关重要。在界面开发中只有想不到没有做不到的，有好的想法，当然要尝试着做出来。对滚动条的扩展，现在有很多类是的例子。 VS2015的代码编辑是非常强大的，其中有一个功能可以把滚动态变成MinMap，可以通过Options->Text Editor->C/C+±>Scroll ...
js计算滚动条高度及窗口高度
weixin_30752699的博客
09-13 506
//页面位置及窗口大小 function GetPageSize() { var scrW, scrH; if(window.innerHeight && window.scrollMaxY) { // Mozilla scrW = window.innerWidth + window.scrollMaxX; scrH = window....
scroll系列
m0_62962469的博客
04-09 370
scroll翻译过来就是滚动的，我们使用scroll系列的相关属性可以动态的得到该元素的大小，滚动距离等。 scroll系列属性 作用 Element.scrollTop 返回被卷去的上侧距离，返回数值不带单位 Element.scrollLeft 返回被卷去的左侧距离，返回数值不带单位 Element.scrollWidth 返回自身实际的宽度，不含边框，返回数值不带单位 Element.scrollHeight 返回自身实际的高度，不含边框，返回数值不带单
自定义滚动条万能比例公式
VCLife
05-02 667
自定义滚动条的万能比例： 滑块的高度 / 滑槽的高度 = 滑槽的高度 / 内容的高度 = 滑块的滚动距离 / 内容的滚动距离
鸿蒙学习必备【建议收藏】—ArkUI组件开发常见问题(ArkTS)
2401_82546228的博客
05-28 2308
自定义弹窗的定义和初始化需要用到属于ArkTS语法内容，必须在ets后缀文件中定义使用，不能在ts后缀文件中定义使用。问题现象在自定义弹窗内定义的变量内容，在关闭弹窗或变量变化时需要及时传递给页面，可以通过何种方式传递？解决措施方式一：使用组件的状态变量传递。方式二：在初始化弹窗时，传递一个方法给自定义弹窗，在自定义弹窗中触发该方法，弹窗中变量作为方法的参数。方式三：使用AppStorage或LocalStorage方式管理页面状态，实现自定义弹窗和页面之间状态的共享。代码示例build() {
模拟垂直滚动条
一笑的博客
10-17 508
1.滚动条的高度 = 容器的高度/内容的高度*容器的高度 2.内容移动的距离=(内容的高度-容器的高度) / (容器的高度-滚动条的高度) * 滚动条移动的距离<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> *{
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值