css怎么隐藏滚动条样式

在网页设计中，隐藏滚动条是一种常见的样式需求。当网页内容较为简单，或者需要实现类似APP界面的滑动效果时，隐藏滚动条可以更好地增强用户体验。通过CSS技术，我们能够轻松实现对滚动条样式的自定义。

一、隐藏滚动条的方法

1、使用CSS代码

/隐藏滚动条/
::-webkit-scrollbar {

display: none;

}

在这段CSS代码中，通过设置“display: none”属性，我们可以让滚动条不再显示。但是这种方法只能针对WebKit内核的浏览器（如Chrome、Safari等）有效，且存在部分兼容性问题。

2、使用JavaScript代码

/隐藏滚动条/
window.onload=function() {

//隐藏滚动条
document.documentElement.style.overflow='hidden';
document.body.style.overflow='hidden'; //针对火狐浏览器

//禁止滚动条滚动
document.documentElement.style.overflow='hidden';
document.body.style.overflow='hidden';

}

通过JavaScript代码，我们可以使用“document.documentElement.style.overflow='hidden'”将浏览器滚动条隐藏掉。但是这种方法必须载入全部页面后才能生效，并且会对某些网站的布局造成影响。

3、使用插件技术

对于一些不熟悉CSS或JavaScript等技术的网页设计者，可以考虑使用第三方的滚动条插件，如iScroll、perfect-scrollbar、nicescroll等。这些插件通过增加特定的CSS或JavaScript代码，可以实现隐藏滚动条并美化滑动效果。

二、美化滚动条的方法

除了隐藏滚动条以外，我们还可以通过CSS技术实现滚动条的美化。在CSS3规范中，提供了新的滚动条样式属性，能够实现更加丰富的滚动条效果。

1、改变滚动条的颜色

/改变滚动条的颜色/
::-webkit-scrollbar {

width: 10px;
height: 10px;
background-color: #F5F5F5;

}

::-webkit-scrollbar-thumb {

border-radius: 5px;
background-color: #999999;

}

在这段CSS代码中，通过设置“webkit-scrollbar”属性，我们可以定义滚动条的宽高和背景颜色。通过设置“webkit-scrollbar-thumb”属性，我们可以定义滚动条的鼠标操作区域的颜色和边框样式。

2、改变滚动条的形状

/改变滚动条的形状/
/纵向滚动条/
::-webkit-scrollbar {

width: 10px;
background-color: #F5F5F5;

}

::-webkit-scrollbar-thumb {

border-radius: 5px;
background-color: #999999;

}

/横向滚动条/
::-webkit-scrollbar {

height: 10px;
background-color: #F5F5F5;

}

::-webkit-scrollbar-thumb {

border-radius: 5px;
background-color: #999999;

}