CSS美化滚动条的方法

给需要滚动的元素添加伪选择器，::-webkit-scrollbar{width:0;}，

将宽度设为0，滚动条就会隐藏。

PS：

可以设置滚动条样式，使其美观。

/*滚动条宽长,滚动条整体部分，其中的属性有width,height,background,border等。*/

::-webkit-scrollbar{

width: 7px;

}

/*滚动条的滑轨背景颜色,可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果。*/

::-webkit-scrollbar-track{

background-color: #f5f5f5;

-webkit-box-shadow:inset 0 0 3px rgba(0,0,0,0.1);

border-radius:5px;

}

/* 滑块颜色 */

::-webkit-scrollbar-thumb{

background-color: rgba(0, 0, 0, 0.2);

border-radius: 5px;

}

/*滚动条两端的按钮。可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果。*/

::-webkit-scrollbar-button{

background-color: #eee;

display: none;

}

/* 横向滚动条和纵向滚动条相交处尖角的颜色 */

::-webkit-scrollbar-corner{

background-color: black;

}

效果：

CSS美化滚动条的方法相关推荐

纯css美化滚动条样式
https://www.emperinter.info/2020/09/20/scrollbar-in-browser/ 自己完善自己博客再Ipad等移动端的菜单时选用了左右滑动的菜单模式!当然就会使 ...
css改火狐滚动条样式_纯css美化滚动条样式
知乎的编辑器对于复制转发文章来说特别不友好(直接复制后代码乱码,字体变化,表格数据丢失),不太想过多重复编辑,只会编辑转发部分到这上面来,如感觉还不错,请跳转到:https://www.emperin ...
CSS隐藏滚动条的方法
方法一: 纯CSS+div样式隐藏. 在需要滚动的元素外面再套一个div,给最外面的div设置样式overflow:hidden,宽度比需要滚动的元素小: 之后给需要滚动的元素设置样式overflow ...
Html,Css美化滚动条（附上图例）
有没有觉得html默认的滚动条样式丑到爆炸,但是自己又不会修改,下面让我来手把手教你如何更改滚动条的而样式,代码简单易懂,开箱即用! 我就是cv工程师!!! 来看看一般的滚动条妈呀是不是感觉很丑,现 ...
用CSS美化你的滚动条
本文将会告诉你如何用CSS修改/美化浏览器页面上出现的滚动条.改变它们的颜色,调整它们的外形,适配你对页面UI设计.我们首先将会看看谷歌(Webkit)浏览器提供了哪些CSS属性,最后,还将介绍如何用 ...
html overflow隐藏滚动条,css隐藏滚动条方法
我们在前端开发过程中经常会遇到这种情况,在一小块的内容上会加上滚动条,但是为了美观我们会隐藏滚动条还需要支持滚动,最容易的办法就是使用iscroll插件来实现,但这不是我们想要的,细想一下,现在css ...
实现CSS隐藏滚动条并可以滚动内容
隐藏滚动条的同时还需要支持滚动,我们经常在前端开发中遇到这种情况,最容易想到的是加一个iscroll插件,但其实现在CSS也可以实现这个功能,我已经在很多地方使用了,下面一起看看这三种方法. 方法1: ...
在HTML中使用CSS美化网页的三种方法
在HTML中使用CSS美化网页的三种方法 CSS是Cascading Style Sheets(级联样式表)的缩写,CSS是一种样式表语言,用于为HTML文档定义布局.例如,CSS涉及字体.颜色.边距 ...
移动端屏幕适配和css美化浏览器自带的滚动条
一.css美化浏览器自带的滚动条: 浏览器自带的滚动条显示不太美观,我们可以调css样式来美化一下.了解以下浏览器(webkit内核)滚动条自带伪类样式: ::-webkit-scrollbar:针对 ...

CSS美化滚动条的方法

CSS美化滚动条的方法相关推荐

最新文章

热门文章