使用CSS美化、隐藏滚动条

进阶教程 2周前 (11-15) 浅唱丶
20
0

在HTML页面中,超出页面高度会自动在侧边显示滚动条。但是默认样式非常简单,看着也不美观;那么如何美化侧边滚动条呢?

可以通过 :-webkit-scrollbar 伪类元素实现美化滚动条,

CSS修改滚动条

/* 定义滚动条 */
body::-webkit-scrollbar {
   width: 5px;
   height: 5px;
   background-color: #f3f3f3;
}
/* 定义滚动条轨道 */
   body::-webkit-scrollbar-track {
   box-shadow: none;
   border-radius: 10px;
   background-color: #f3f3f3;
}
/* 定义滑块 */
body::-webkit-scrollbar-thumb {
   border-radius: 10px;
   box-shadow: none;
   background-color: #66758c;
}

将上面的代码加到<style>css文件中,保存之后刷新页面即可看到效果。

上述的代码是比较简单的美化了一下,各位同学可以根据自己站点的风格样式等去自定义修改。

如果在DIV标签中,比如做了超出滚动的样式,不想出现滚动条,可以直接给::-webkit-scrollbar添加

display: none进行隐藏即可。

本文由:浅唱丶 原创并发布于 小菜的IT网,转载需注明出处:https://www.xiaocaiit.cn/385.html
浅唱丶
作者

相关推荐

通过CSS实现圆形动态加载条动画效果

在做前端的时候,常用到进度条显示的效果;长条形的进度条是最常见也是比较简单的,如果想独特一些,用圆形的进度条该怎么实现呢?可以用纯CSS实现吗? 当然可以的,下面便分享完整的制作过程。 话不多说,先看最终效果图。 (最下方附成品效果源码文件...

了解WordPress全局变量

使用wordpress作为网站程序,常常会碰到一些全局变量,本文整理了一些常见的全局变量释义方便理解。 循环变量内部全局变量 $post (WP_Post):当前帖子的帖子对象。WP_Post类参考中描述的对象。 $posts:由一些核心功...

WordPress显示评论用户IP的插件Easy Location推荐

一款来自大发的显示用户IP地址的wordpress插件,基于本地IP库进行查询,与使用接口查询不同的时候比较稳定,但是缺少实时性;不过够用。 这个插件不仅能够显示评论用户的IP,也可以显示文章作者的IP。不过没有设置面板,需要使用者在代码里...

评论

已有0人参与了评论