隐藏网页中的滚动条

最新推荐文章于 2025-02-28 16:53:02 发布

转载最新推荐文章于 2025-02-28 16:53:02 发布 · 990 阅读

文章标签：

#css #html

本文介绍如何在不同浏览器中隐藏滚动条的样式，包括Chrome、IE/Edge及Firefox，并提供了具体的CSS代码实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Chorme

body::-webkit-scrollbar {
    display: none;
}

IE/Edge

body {
    -ms-overflow-style: none;
}

Firefox

firefox 是三者之中最麻烦的：

html {
    overflow: -moz-hidden-unscrollable; /*注意！若只打 hidden，chrome 的其它 hidden 会出问题*/
    height: 100%;
}

body {
	height: 100%;
	width: calc(100vw + 18px); /*浏览器滚动条的长度大约是 18px*/
	overflow: auto;
}


原文链接：https://juejin.im/post/5a6046dbf265da3e253c3534