自定义滚动条

Posted 2021-04-10

我正在使用adobe air制作一个应用程序，我有一个使用overflow-y的div。为了让UI看起来漂亮和性感，用自己的创作替换丑陋的default scrollbar [link broken]的最佳方法是什么？

谢谢

编辑：每个人都记得这是在adobe air上，而不是在浏览器上（我知道最好不要乱用滚动条，这就是web -4.2）

答案

别。

用户知道如何使用默认平台UI小部件：他们知道他们的样子，行为方式等等。平台的工作非常好。

他们不知道如何使用您的小部件。即使您尝试复制除了外观之外的平台，您的小部件也会表现为廉价的仿冒品;它将缺少用户期望的功能：

• 您的滚动缩略图是否增长/缩小以显示文档的长度，其最小尺寸使其始终可以抓取 - 但仅限于预期的平台？
• 中间单击是否滚动到单击的位置，左键单击仅向下滚动，右键单击向上滚动，每个与滚动条上单击的位置成比例 - 在预期的平台上？
• 点击拇指和向上或向下箭头之间的空白区域有效吗？它是否按用户期望的金额滚动，具体因平台而异？
• 按住滚动按钮时滚动是否达到用户期望的速度？
• 当鼠标移出滚动条时，用户如何拖动拇指？或者在前面提到的平台上单击鼠标中键。
• 您的自定义滚动条是否遵循用户选择的视觉主题，例如，因为他因残疾而需要超高对比度和/或超大小部件？

大多数人的答案可能是“不”。至少，这是我在网站上的经验，设计师认为平台滚动条不够可爱。

另一答案

Skin them，就像你任何其他flex组件一样。为了使代码保持干净，您可以指定通过css文件中的样式嵌入外观文件。

编辑：A link on how to skin a scrollbar