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

最新推荐文章于 2025-07-11 00:32:42 发布

原创最新推荐文章于 2025-07-11 00:32:42 发布 · 3.5k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#scroll #list

c++ 同时被 2 个专栏收录

37 篇文章

订阅专栏

MFC

19 篇文章

订阅专栏

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

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

A.计算偏移:

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

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

B.计算Scroll拇指高度

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

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

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

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

guoquan2003

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

关于鸿蒙开发中滚动容器Scroll的介绍

qq_45569925的博客

08-17

2172

当子组件的布局尺寸超过Scroll的尺寸时，内容可以滚动。

【鸿蒙开发】ArkUI滚动类组件-Scroll、Scroller

huchenghe2的博客

11-15

1255

(scroller?scroller：给Scroll绑定一个滚动控制器，该控制器可以控制子组件的各种滚动能力，Scroller目前只支持绑定到Scroll和List。Scroll() {Text('Text1')// 子组件的高度小于Scroll高度，不会触发滚动scrollable：设置Scroll的滚动方向，提供了以下 3 种滚动方向：Vertical（默认值）：仅支持竖直方向滚动。Scroll() {// Scroll没有设置滚动方向，默认竖直方向滚动Column() {

参与评论您还未登录，请先登录后发表或查看评论

Scroll位置计算

weixin_30547797的博客

08-26

288

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

379

[code="java"]package { import flash.display.Sprite; import flash.events.MouseEvent; import flash.geom.Rectangle; import flash.text.TextField; import flash....

滚动条设计：基本算法

tiangej的专栏

05-03

2735

以纵向滚动条为例： >>已知条件： 滚动条高度=h 最大值=max 最小值=min 翻页跨度=p >>基本算法页数： pageCount = (max - min) / p 滑块高度： thumbH = h / pageCount

标准滚动条算法

weixin_33971130的博客

11-15

682

#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...

一文吃透 HarmonyOS 的 Scroll 滚动组件，从入门到精通

2401_86731168的博客

07-11

1208

本文围绕 HarmonyOS 的 Scroll 滚动组件展开，介绍其作为可滚动容器的基础特性，包括支持单个子组件、需内容尺寸超容器尺寸才滚动等。详解核心属性（滚动方向、滚动条样式、边缘效果等）、常用事件（滚动前后、开始停止、到边缘等）及 Scroller 控制器的各类操作（滚动到指定位置、翻页、惯性滚动等），还涵盖嵌套滚动实现方式与实用技巧，助力开发者掌握其使用，打造流畅滚动体验

鸿蒙Next开发：List组件控制实现视频卡片和列表区域联动滚动总结

DMZDAMS的博客

07-31

1453

向上滑动列表，页面向上滚动到末尾后隐藏视频，继续向上滑动，卡片吸顶，列表开始滚动，列表滚动到底触发回弹效果。

元素偏移（offset，scroll,client)介绍，动态设置类名，样式

qq_48763502的博客

08-17

2676

属性 / 方法描述表示一个元素的顶部边框的宽度，以像素表示。表示一个元素的左边框的宽度，以像素表示。在页面上返回内容的可视高度（高度包含内边距（padding），不包含边框（border），外边距（margin）和滚动条）在页面上返回内容的可视宽度（宽度包含内边距（padding），不包含边框（border），外边距（margin）和滚动条）返回任何一个元素的高度包括边框（border）和内边距（padding），但不包含外边距（margin）

VS2010 C++学习（1）：滚动条的设计总结程序

05-13

VS2010 C++学习（1）：滚动条的设计总结程序

计算一个滚动列表滚动到具体的位置

cs840610862的博客

01-10

912

比如下面一段代码 &amp;lt;div class=&quot;scroll-container&quot;&amp;gt; &amp;lt;div class=&quot;list-container&quot;&amp;gt; &amp;lt;span class=&quot;item1&quot;&a

自定义滚动条的实现思路与关键算法

weixin_34006468的博客

05-20

1404

在web开发中，自定义滚动条是个常见的需求，虽然浏览器原生的滚动条很强大并且在大多数场景下表现的很好，但某些时候我们仍然希望修改他的样式，比如变细一点，或者去掉圆角和轨道，又或者隐藏他们。这些都属于自定义行为，本篇文章将介绍自定义滚动条的几种实现思路，并着重讲解最流行的js方案。上图是自定义的效果（视频在转换时降速了，其实非常快）在正文开始前，我们先统一滚动条各个部分的名称。一、实现思路实现自定义...

滚动条ScrollBar

qq_206720162的博客

11-20

530

界面控件 - 滚动条ScrollBar（对滚动条消息和鼠标消息结合讲的不错）界面是人机交互的门户，对产品至关重要。在界面开发中只有想不到没有做不到的，有好的想法，当然要尝试着做出来。对滚动条的扩展，现在有很多类是的例子。 VS2015的代码编辑是非常强大的，其中有一个功能可以把滚动态变成MinMap，可以通过Options->Text Editor->C/C+±>Scroll ...

js计算滚动条高度及窗口高度

weixin_30752699的博客

09-13

520

//页面位置及窗口大小 function GetPageSize() { var scrW, scrH; if(window.innerHeight && window.scrollMaxY) { // Mozilla scrW = window.innerWidth + window.scrollMaxX; scrH = window....

scroll系列

m0_62962469的博客

04-09

385

scroll翻译过来就是滚动的，我们使用scroll系列的相关属性可以动态的得到该元素的大小，滚动距离等。 scroll系列属性作用 Element.scrollTop 返回被卷去的上侧距离，返回数值不带单位 Element.scrollLeft 返回被卷去的左侧距离，返回数值不带单位 Element.scrollWidth 返回自身实际的宽度，不含边框，返回数值不带单位 Element.scrollHeight 返回自身实际的高度，不含边框，返回数值不带单

自定义滚动条万能比例公式

VCLife

05-02

715

自定义滚动条的万能比例：滑块的高度 / 滑槽的高度 = 滑槽的高度 / 内容的高度 = 滑块的滚动距离 / 内容的滚动距离

关于滚动条的一些说明

格物致知的专栏 [音视频编解码网络协议计算机视觉计算机图形学图像理解语音识别机器学习模拟电路传感器]

08-21

1122

滚动条是一种很有用的控件，当一个页面的内容在显示区域放不下时，就要用到它了。实现界面的时候，有的时候需要实现滚动条控件，有些人可能不明白其原理，这里说说其原理，还是很有意义的。滚动条的滑动偏移量/(显示区域的长度-滚动条的长度)=滑出的内容长度/(所有显示内容的长度-显示区域的长度)。3. 滚动条的滑动偏移量/滚动条的长度=滑出的内容长度/显示区域的长度。以上是滚动条的原理。2. 滚动条的长度/显示区域的长度=显示区域的长度/所有显示内容的长度。1. 当要显示的内容不大于显示区域，这时候不需要显示滚动条。

scroll-view希望小程序中可滚动的时候一直展示滚动条

最新发布

09-20

在小程序（如微信小程序、uni-app）中，`scroll-view` 组件默认的滚动条行为是：**仅在用户滚动时短暂显示，随后自动隐藏**。这种设计虽然节省视觉空间，但有时会影响用户体验 —— 用户可能不知道该区域是可以滚动的。你希望实现的效果是： > ✅ **当内容可滚动时，滚动条一直可见（常显），不自动消失** 遗憾的是，**微信小程序原生 `scroll-view` 不支持直接设置“始终显示滚动条”**，因为它使用的是原生组件渲染，无法通过 CSS 控制其内部滚动条样式或显示策略（尤其是在 iOS 和 Android 原生环境下）。但我们可以通过以下方案 **间接实现“可滚动时滚动条常显”的效果**。 --- ## ✅ 最佳解决方案：条件性 + 伪滚动条提示我们结合两个手段： 1. 判断内容是否超出容器，决定是否启用 `scroll-view` 2. 在可滚动时，添加一个“视觉上的滚动条”来提示用户，并模拟常显滚动条 --- ### 🔧 步骤一：判断是否需要滚动（JS） ```javascript // page.js 或组件逻辑 Page({ data: { list: [...], // 数据列表 containerHeight: 300, // scroll-view 高度（px） itemHeight: 50, // 每项高度 showScrollbar: false, // 是否显示“伪滚动条” thumbStyle: '' // 动态设置滚动块位置和大小 }, onLoad() { this.checkIfScrollable(); }, checkIfScrollable() { const { list, containerHeight, itemHeight } = this.data; const contentHeight = list.length * itemHeight; if (contentHeight > containerHeight) { // 内容超出了，应该可以滚动 this.setData({ showScrollbar: true }); // 计算伪滚动条高度和初始位置 const ratio = containerHeight / contentHeight; const thumbHeight = Math.max(20, ratio * containerHeight); // 最小20px this.setData({ thumbStyle: `height: ${thumbHeight}px; background: #aaa; border-radius: 3px;` }); } else { this.setData({ showScrollbar: false }); } } }) ``` --- ### 🖼️ 步骤二：WXML 结构（微信小程序语法） ```xml  <scroll-view scroll-y style="height: 300px; position: relative;" class="scroll-container" @scroll="onScroll">  <view wx:for="{{list}}" wx:key="index" style="height: 50px; line-height: 50px; padding: 0 15px;"> {{item}} </view> </scroll-view>  <view wx:if="{{showScrollbar}}" class="custom-scrollbar-track"> <view class="custom-scrollbar-thumb" style="{{thumbStyle}}; transform: translateY({{thumbTop}}px);"></view> </view> ``` --- ### 🎨 步骤三：WXSS 样式 ```css .scroll-container { overflow: hidden; position: relative; } /* 滚动条轨道 */ .custom-scrollbar-track { position: absolute; right: 4px; top: 0; width: 6px; height: 300px; background: rgba(200, 200, 200, 0.3); border-radius: 3px; pointer-events: none; /* 不影响点击 */ z-index: 999; } /* 滚动块 */ .custom-scrollbar-thumb { width: 100%; background: #aaa; border-radius: 3px; transition: transform 0.1s ease; } ``` --- ### 📌 步骤四：监听滚动事件更新滚动块位置 ```javascript onScroll(e) { const { scrollTop, scrollHeight, scrollWidth, scrollLeft } = e.detail; const viewHeight = this.data.containerHeight; const contentHeight = scrollHeight; if (contentHeight <= viewHeight) return; // 最大可滚动距离 const maxScroll = contentHeight - viewHeight; // 当前滚动比例 const scrollRatio = scrollTop / maxScroll; // 滚动块应偏移的位置 const trackHeight = viewHeight; const thumbHeight = parseInt(this.data.thumbStyle.match(/height:\s*(\d+)/)[1]); const maxThumbTop = trackHeight - thumbHeight; const thumbTop = scrollRatio * maxThumbTop; this.setData({ thumbTop }); } ``` --- ### ✅ 效果说明 - 当内容超过 `scroll-view` 高度时，右侧会出现一个灰色滚动条（非原生，但视觉一致） - 滚动时，该“滚动条”会跟随移动 - 即使停止滚动，滚动条依然可见 → 实现了“**可滚动时一直展示滚动条**”的目标 - 兼容微信小程序所有平台（iOS / Android / 开发者工具） --- ### ⚠️ 注意事项 1. **不能修改原生滚动条行为**：微信小程序出于性能和一致性考虑，不允许开发者控制原生滚动条的显示/隐藏时间。 2. **伪滚动条只是 UI 提示**：它不影响实际滚动功能，仅用于增强体验。 3. **高度需预估或动态测量**：如果每项高度不固定，建议用 `createSelectorQuery()` 获取真实内容高度： ```javascript queryContentHeight() { const query = wx.createSelectorQuery().in(this); query.select('.scroll-content').boundingClientRect(); query.exec((res) => { const contentHeight = res[0]?.height || 0; this.setData({ contentHeight }, () => { this.checkIfScrollable(); }); }); } ``` --- ### ✅ 总结 | 目标 | 是否可行 | 方案 | |------|----------|------| | 原生滚动条常显 | ❌ 不支持 | 小程序限制 | | 视觉上“常显滚动条” | ✅ 完全可行 | 使用“伪滚动条”+ `@scroll` 监听 | 推荐做法：**使用自定义 UI 滚动条，在内容可滚动时常显并随滚动更新位置**，这是目前最稳定、跨平台兼容的最佳实践。 ---