htmlayout设计ui 基础篇：[17]自定义滚动条一

2024-10-13 18:52:45

1、第一，我们来看今天实现滚动条的效果：默认没有滚动条出现，当鼠标放上去后有滚动条效果，而且鼠标放上去后，滚动条的颜色会比原来加深些这样的效果是不是以前在哪儿见过？我们在前面说的，scroll-indicator效果是不是很像呢？如下图所示效果不同的是，这样的效果，我们不能改变形状和颜色

3、第三，我们来看下代码怎么写：<style>@set v-scroll-indi罕铞泱殳cator { .slider { background:#f8f8f8; border-radius:5px; margin:0; } } body{ width:*; height:800px;}div.vscroll { vertical-scrollbar: "v-scroll-indicator";}</style>说明：1、@set v-scroll-indicator用来定义.slider(滚动条)的显示样式，默认是直角显示效果2、加上border-radius:5px;这个效果，就变成我们想要的效果（如上图所示）3、div.vscroll是所在层区域所要用到的效果，引用刚才我们定义好的v-scroll-indicator，就可以了

4、第四，正文中所需的代码是：<body><div.vscroll><div>内容显示....</div></div></body>

5、到上面就已经可以实现我们要的效果了，你可以自己尝试做下，看下效果～