如何用原生JavaScript编写一个自定义滚动条组件？

本文共计2639个文字，预计阅读时间需要11分钟。

原文示例为：本文字例为大家分享了js实现自定义滚动条组件的具体代码，供大家参考，具体内容如下+功能需求：1、按照数据结构创建菜单一内容，显示在页面中；2、点击菜单后，显示对应的下级菜单。

改写后内容：js实现自定义滚动条组件代码示例，功能需求：1、根据数据结构生成菜单列表，显示页面；2、点击菜单项，展示相应下级菜单。

本文实例为大家分享了js实现自定义滚动条组件的具体代码，供大家参考，具体内容如下

功能需求：

1、按照数据结构创建菜单内容，显示在页面中；
2、点击菜单后，显示对应的下级菜单内容，如果整体内容溢出，则出现滚动条；
3、滚动条的高度要随着整体内容高度的改变而改变。
4、鼠标拖动滚动条，整体内容要随着向上滚动。
5、当鼠标滚动时，滚动条和整体内容也要相应滚动。

来看一下效果：

默认状态：

点击菜单，内容溢出后，出现滚动条；

鼠标拖动滚动条，整体内容随着向上滚动：

分析：

• 这个案例中包括折叠菜单和滚动条两个组件 ，所以可以分开来写，然后整合到一起。
• 折叠菜单中要考虑多级菜单出现的情况，使用递归来做，数据的结构一定要统一，方便对数据进行处理。
• 滚动条的创建中，有两个比例等式，一是滚动条的高度/外层div高度=外层div高度/整体内容高度；二是滚动条的位置/（外层div高度-滚动条高度）=内容的scrollTop/（整体内容的高度-外层div高度）
• 当点击折叠菜单后，需要相应地设置滚动条的高度。