代码

隐藏滚动条

直接使用 hideScrollbar 即可

.hideScrollbar::-webkit-scrollbar {display: none; /* Chrome Safari */
}.hideScrollbar {  scrollbar-width: none; /* firefox */  -ms-overflow-style: none; /* IE 10+ */overflow-x: hidden;  overflow-y: auto;
}

美化滚动条

::-webkit-scrollbar {width: 5px; /* 滚动条宽度 */height: 10px;
}::-webkit-scrollbar-track {width: 6px;background: rgba(#101f1c, 0.1);-webkit-border-radius: 2em;-moz-border-radius: 2em;border-radius: 2em;
}::-webkit-scrollbar-thumb {background-color: rgba(144, 147, 153, 0.5);background-clip: padding-box;min-height: 28px;-webkit-border-radius: 2em;-moz-border-radius: 2em;border-radius: 2em;transition: background-color 0.3s;cursor: pointer;
}::-webkit-scrollbar-thumb:hover {background-color: rgba(144, 147, 153, 0.3);
}

CSS 隐藏滚动条 / 美化滚动条相关推荐

html自动移动滚动条,css隐藏移动端滚动条并平滑滚动
HTML代码如下移动端隐藏滚动条解决方案 *{ padding:0; margin:0; } .par-type{ height:50px; -webkit-box-sizing:border-bo ...
纯css隐藏移动端滚动条解决方案（ios上流畅滑动）
html代码展示(直接复制代码保存至本地文件运行即可): <!DOCTYPE html> <html lang="en"><head><m ...
css隐藏移动端滚动条（兼容ios）
尝试过很多类似 .container ::-webkit-scrollbar {display: none;}操作会发现,这些在苹果浏览器根本就不起效果. 既要隐藏滚动条.滑动流畅,还要兼容ios,可 ...
【前端大概一分钟】css隐藏滚动条同时可以滚动
1. 通过 ::-webkit-scrollbar 伪元素 .inner-container::-webkit-scrollbar {display: none; } 复制代码简单粗暴,但是兼容性不 ...
css隐藏滚动条、兼容
css隐藏滚动条 .scrollbar{scrollbar-width: none;-ms-overflow-style: none; } .scrollbar::-webkit-scrollbar ...
js 隐藏滚动条_轻量级 React.js 虚拟美化滚动条组件RScroll
前几天有给大家分享一个Vue自定义滚动条组件VScroll.今天再分享一个最新开发的React PC端模拟滚动条组件RScroll. vue+pc桌面端模拟滚动条组件VScroll rscroll 一 ...
不同浏览器CSS隐藏元素滚动条
CSS隐藏元素滚动条 Firefox浏览器对于Firefox,我们可以将滚动条宽度设置为none: scrollbar-width: none; /* Firefox */ IE浏览器对于IE,我 ...
纯css解决div隐藏浏览器原生滚动条，但保留鼠标滚动效果的问题
纯css解决div隐藏浏览器原生滚动条,但保留鼠标滚动效果的问题参考文章: (1)纯css解决div隐藏浏览器原生滚动条,但保留鼠标滚动效果的问题 (2)https://www.cnblogs.co ...
如果不需要CSS隐藏滚动条
本文翻译自:CSS hide scroll bar if not needed I am trying to figure out how I can hide the overflow-y:scro ...

CSS 隐藏滚动条 / 美化滚动条

代码

隐藏滚动条

美化滚动条

CSS 隐藏滚动条 / 美化滚动条相关推荐

最新文章

热门文章