CSS ---- 隐藏滚动条

一、隐藏滚动条

tips：注意兼容不同浏览器

:root,html,body {padding: 0;margin: 0;overflow: -moz-hidden-unscrollable;height: 100%
}
/* 隐藏滚动条 */
body::-webkit-scrollbar {display: none;
}
body {-ms-overflow-style: none;height: 100%;width: calc(100vw + 18px);overflow: auto;
}

二、覆盖滚动条

/* 覆盖滚动条样式 */
div::-webkit-scrollbar{width:8px;height:8px;
}
div::-webkit-scrollbar-track{background: red;border-radius:2px;
}
div::-webkit-scrollbar-thumb{background: blue;border-radius:10px;
}
div::-webkit-scrollbar-thumb:hover{background: skyblue;
}
div::-webkit-scrollbar-corner{background: #ccc;
}

三、参数说明

-webkit-scrollbar----滚动条整体
-webkit-scrollbar-thumb ----滚动条内嵌的滚动块
-webkit-scrollbar-track----滚动条的轨道
-webkit-scrollbar-button----滚动条上下按钮
-webkit-scrollbar-corner----横竖滚动条交汇处

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 ...
css 隐藏滚动条竖向y滚动，横向x不滚动
.bottom {overflow-x: hidden;overflow-y: scroll; } 参考博客: 3种方法实现CSS隐藏滚动条并可以滚动内容
html overflow隐藏滚动条,css隐藏滚动条方法
我们在前端开发过程中经常会遇到这种情况,在一小块的内容上会加上滚动条,但是为了美观我们会隐藏滚动条还需要支持滚动,最容易的办法就是使用iscroll插件来实现,但这不是我们想要的,细想一下,现在css ...
CSS隐藏滚动条，保留滚动功能
CSS隐藏滚动条,保留滚动功能原理:设置父级为溢出隐藏,而子级不进行溢出隐藏设置同时改变子级的宽度使进度条溢出到父级外面. 设置父级overflow:hidden;是为了使父级溢出隐藏.再设置子级的 ...
实现CSS隐藏滚动条并可以滚动内容
隐藏滚动条的同时还需要支持滚动,我们经常在前端开发中遇到这种情况,最容易想到的是加一个iscroll插件,但其实现在CSS也可以实现这个功能,我已经在很多地方使用了,下面一起看看这三种方法. 方法1: ...
CSS | 隐藏滚动条，但保持页面依旧能够滚动
原文地址:CSS | 隐藏滚动条,但保持页面依旧能够滚动(永久地址,保存网址不迷路
css隐藏滚动条，兼容ie和chrome
之前隐藏滚动条一直用的::-webkit-scrollbar(chrome)和scrollbar-......-color一套(ie). ie下貌似只能修改颜色,于是我把它改成和背景一样,假装它隐藏了 ...
CSS隐藏滚动条并可以滚动内容
隐藏滚动条常用方法 .container::-webkit-scrollbar {display:none} 为了兼容其他的浏览器,可以用这样的方法: 在滚动区域外再套一层div,给这层div设置ov ...

CSS ---- 隐藏滚动条

CSS ---- 隐藏滚动条

一、隐藏滚动条

二、覆盖滚动条

三、参数说明

CSS ---- 隐藏滚动条相关推荐

最新文章

热门文章