CSS隐藏滚动条的方法

方法一：

纯CSS+div样式隐藏。

在需要滚动的元素外面再套一个div，给最外面的div设置样式overflow:hidden，宽度比需要滚动的元素小；

之后给需要滚动的元素设置样式overflow-x:hidden; overflow-y:scroll；

<style type="text/css">
*{margin:0;padding:0;}
.box{width: 100px;height: 300px;overflow:hidden;border:1px solid #000;margin:50px auto;
}
ul {height: 100%;width: 120px;overflow-x: hidden;overflow-y: scroll;
} ul li{list-style: none;width: 100px;height:60px;line-height: 60px;text-align: center;border:1px solid #ccc;margin-top: -1px;
}</style><div class="box"><ul><li>1111</li><li>1111</li><li>1111</li><li>1111</li><li>1111</li><li>1111</li><li>1111</li></ul></div>

效果：前后

方法二

给需要滚动的元素添加伪选择器，::-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隐藏滚动条的方法相关推荐

html overflow隐藏滚动条,css隐藏滚动条方法
我们在前端开发过程中经常会遇到这种情况,在一小块的内容上会加上滚动条,但是为了美观我们会隐藏滚动条还需要支持滚动,最容易的办法就是使用iscroll插件来实现,但这不是我们想要的,细想一下,现在css ...
实现CSS隐藏滚动条并可以滚动内容
隐藏滚动条的同时还需要支持滚动,我们经常在前端开发中遇到这种情况,最容易想到的是加一个iscroll插件,但其实现在CSS也可以实现这个功能,我已经在很多地方使用了,下面一起看看这三种方法. 方法1: ...
css 隐藏滚动条竖向y滚动，横向x不滚动
.bottom {overflow-x: hidden;overflow-y: scroll; } 参考博客: 3种方法实现CSS隐藏滚动条并可以滚动内容
【前端大概一分钟】css隐藏滚动条同时可以滚动
1. 通过 ::-webkit-scrollbar 伪元素 .inner-container::-webkit-scrollbar {display: none; } 复制代码简单粗暴,但是兼容性不 ...
css隐藏滚动条、兼容
css隐藏滚动条 .scrollbar{scrollbar-width: none;-ms-overflow-style: none; } .scrollbar::-webkit-scrollbar ...
如果不需要CSS隐藏滚动条
本文翻译自:CSS hide scroll bar if not needed I am trying to figure out how I can hide the overflow-y:scro ...
5种css隐藏元素的方法_在CSS中隐藏元素的10种方法
5种css隐藏元素的方法 There are multiple ways to hide an element in CSS, but they differ in the way they affe ...
文字开头隐藏css,css隐藏文字一些方法总结
摘要腾兴网为您分享:css隐藏文字一些方法总结,字体大师,知音漫客,找乐助手,天天爱等软件知识,以及科学计算器app,yy自动上马甲,校园e信,英雄三部曲,苏州公共自行车,立体字转换器,四川省教育资 ...
css样式隐藏元素的方法,你不知道的css隐藏元素的方法
css隐藏元素是网页编写常用的方式,根据我的经验总结了以下几种css隐藏元素的方法. 记录 opacity opacity属性的隐藏方法主要是将元素透明度opacity设置为0,从而在视觉上就隐藏了元 ...

CSS隐藏滚动条的方法

CSS隐藏滚动条的方法相关推荐

最新文章

热门文章