如何实现类似于QQ系统设置界面，拖动滚动条定位到类别的效果？

[wanbolantian]

如图是QQ的系统设置界面，其中有一点比较特别的，拖动设置界面的滚动条时，
左边的tab会自动随着滚动条的拖动，实现自动定位。比如我将滚动条拖到状态时，
左边的tab会自动定位到状态这个tab。请问这样的效果是怎样实现的
，大神们给点思路或贴点伪码吧

[_lee_chong]

没怎么玩qq。。。不过看你这截图的话，它的左边其实准确说不是tab。。。只是个按钮或者说标签； 这里有互动， 左边的标签与右边的panel里的y坐标有关联关系； 当点击左边标签时，对应的移动滚动条到指定y坐标； 点移动油表滚动条时到指定y坐标时，将左边对应关系的标签高亮

[迹象Kimizhou_blog]

添加一个事件，就是滚动条滚动事件，判断他的位置，按百分比判断他的位置，如果位置到了指定百分比，就的打开另外一个tab

[_小黑_]

js 例如QQ 360 qq管家 都是 使用 html 实现的 你可以看看 nodejs

[以专业开发人员为伍]

这个很简单。如果每一个局部的设置panel竖直方向叠在一起（几个Panel组合在一个Panel中，然后这个Panel放在一个ScrolledBorder容器中），比如说高度分别是300、400、200、300，那么滚动条向上滚动了450的时候，你就知道前两个Panel刚好滚出屏幕了。

[以专业开发人员为伍]

实际上，就是简单的for循环和减法，就行了。

[以专业开发人员为伍]

引用 3 楼 l397870376 的回复:

js 例如QQ 360 qq管家 都是 使用 html 实现的 你可以看看 nodejs

编程语言可没有给你提供任何算法设计。

[wanbolantian]

引用 4 楼 sp1234 的回复:

这个很简单。如果每一个局部的设置panel竖直方向叠在一起（几个Panel组合在一个Panel中，然后这个Panel放在一个ScrolledBorder容器中），比如说高度分别是300、400、200、300，那么滚动条向上滚动了450的时候，你就知道前两个Panel刚好滚出屏幕了。

这个思路靠谱，马上测试下

[wanbolantian]

引用 4 楼 sp1234 的回复:

这个很简单。如果每一个局部的设置panel竖直方向叠在一起（几个Panel组合在一个Panel中，然后这个Panel放在一个ScrolledBorder容器中），比如说高度分别是300、400、200、300，那么滚动条向上滚动了450的时候，你就知道前两个Panel刚好滚出屏幕了。

这个思路靠谱，马上测试下

[迹象Kimizhou_blog]

其实我发现了更好的做法，就是 鼠标悬停进入事件，当鼠标悬停进入的时候，就表示到了这个部分了，所以你就可以选中左边了