如何制作这种滚动条？

广寒月蛮兔 2018-12-06 10:57:46

求解！百度了好久，都没有讲如何分别设置短条和长条高度宽度

...全文

582 1 打赏收藏转发到动态举报

写回复

1 条回复

切换为时间正序

请发表友善的回复…

发表回复

键盘舞者113 2018-12-09

打赏
举报

回复

你直接用Canvas绘画，画一个一条线，在画一个矩形，滚动条就完成了，具体矩形的位置需要你实时传递位置刷新即可

关于滚动条，大家知道有一些部件可以设置自带的滚动条，来达到滚动的效果，比如动态面板。但是系统自带的滚动条有一个通病：不太好看并且不能修改样式。那我们怎么做好看的滚动条呢？需要我们去做设置。先看一下动态面板做出来的滚动条是怎样的。自带的这种滚动条有时会不符合我们的要求。那么就需要做出改动。以动态面板为例，我们一起来看看怎么来处理这个滚动条吧。如果滚动条是不需要显示出来的话，只需要把动态面板的宽度加...

前言在我们制作网站不止一级路由时，可能会要在子路由里面单独设置一个滚动条。而不是由网页自带的滚动条进行滑动。不然可能会出现这种效果网页自带滚动条滑动如果用网页自带的浏览器的话就是整个页面向下滑动，如果用户想切换到另一个子路由模块的话，就得返回顶部才能操作。总所周知，用户体验是最重要的，我们为了节省这一步。是不是可以在子路由里面给他加上一个滚动条而达到只有子路由里面内容滚动呢？？？？怎样给子路由加上滚动条 overflow-x或overflow-y 给子路由加上一个id，然后给他加上样式 <

一、滚动条的基本概念二、自定义滚动条的作用三、实现自定义滚动条的基础方法示例一：基本的自定义滚动条示例二：不同方向的滚动条四、进阶功能：响应式设计示例三：响应式滚动条五、实际开发中的技巧示例四：使用JavaScript实现跨浏览器支持在Web开发中，滚动条是用户界面的一个重要组成部分，尤其是在内容较多或者需要展示大量信息的网站上。默认情况下，浏览器提供的滚动条样式往往缺乏美感，无法满足设计师们对网站美观度的要求。因此，自定义滚动条成为了一项常见的需求。

最近在用 Bootstrap 写一个需要适配 WEB 和 WAP 的网站，写完后发现 WAP 端总是会出现横向滚动条，也就是 X 轴滚动条，导致 WAP 端页面左右滑来滑去，很是令人蛋疼，即使设置了 overflow-x： hidden和 width:100% 也无法去除，通过各种途径寻找解决方法，最终在张鑫旭大神的一篇文章里找到了最终解决方法，在这里记录一下防止之后自己用得到时还需要重新找，也为那些同样有这方面问题的童鞋提供方便。出现这种问题的主要原因就是，由于内容较多导致出现Y轴滚动条，占用了页面

在现代网页设计中，自定义滚动条样式已经成为提升用户体验的重要手段之一。通过CSS3，开发者们可以摆脱传统浏览器滚动条的单调与局限，创建出富有个性且与页面风格一致的滚动条。本章将介绍如何使用CSS3来自定义滚动条的外观，并讨论不同浏览器下的兼容性问题及解决方案。我们将从基础的自定义滚动条样式开始，逐步深入到更复杂的场景和性能优化的考量。通过本章的学习，读者将能够熟练掌握自定义滚动条的设计与实现技巧，为构建更加精致和流畅的用户界面奠定坚实的基础。

80,479

社区成员

91,390

社区内容

发帖

与我相关

我的任务

androidandroid-studioandroidx 技术论坛（原bbs）

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章