我相信你可以使用overflow CSS属性来操作它，但是它们对浏览器的支持有限。一位消息人士说它是Internet Explorer 5（及更高版本）、Firefox 1.5（及更高版本）和Safari3（及更高版本）-也许足以满足您的目的。

滚动，滚动，滚动有很好的讨论。

在body标签上设置#0，如下所示：

<style type="text/css">body {overflow: hidden;}</style>

上面的代码“隐藏”了水平和垂直滚动条。

如果你想隐藏只有垂直滚动条，使用overflow-y：

<style type="text/css">body {overflow-y: hidden;}</style>

如果你想隐藏只有水平滚动条，使用overflow-x：

<style type="text/css">body {overflow-x: hidden;}</style>

如果需要，内容会被剪切以适合填充框。不提供滚动条，也不允许支持允许用户滚动（例如通过拖动或使用滚轮）。内容可以以编程方式滚动（例如，通过设置属性的值，例如offsetLeft），因此元素仍然是一个滚动容器。_（source

body, html { /* These are defaults and can be replaced by hexadecimal color values */scrollbar-base-color: aqua;scrollbar-face-color: ThreeDFace;scrollbar-highlight-color: ThreeDHighlight;scrollbar-3dlight-color: ThreeDLightShadow;scrollbar-shadow-color: ThreeDDarkShadow;scrollbar-darkshadow-color: ThreeDDarkShadow;scrollbar-track-color: Scrollbar;scrollbar-arrow-color: ButtonText;}

-ms-scrollbar-base-color-ms-scrollbar-face-color-ms-scrollbar-highlight-color-ms-scrollbar-3dlight-color-ms-scrollbar-shadow-color-ms-scrollbar-darkshadow-color-ms-scrollbar-base-color-ms-scrollbar-track-color

::-webkit-scrollbar {}             /* 1 */::-webkit-scrollbar-button {}      /* 2 */::-webkit-scrollbar-track {}       /* 3 */::-webkit-scrollbar-track-piece {} /* 4 */::-webkit-scrollbar-thumb {}       /* 5 */::-webkit-scrollbar-corner {}      /* 6 */::-webkit-resizer {}               /* 7 */

::-webkit-scrollbar-track-piece:start { /* Select the top half (or left half) or scrollbar track individually */ }::-webkit-scrollbar-thumb:window-inactive { /* Select the thumb when the browser window isn't in focus */ }::-webkit-scrollbar-button:horizontal:decrement:hover { /* Select the down or left scroll button when it's being hovered by the mouse */ }

添加窗口滚动处理程序公共静态处理程序注册addWindowScrollHandler（Windows. ScrollHandler）

添加一个窗口. ScrollEvent处理程序参数：处理程序-处理程序退货：返回处理程序注册[来源]（http://www.gwtproject.org/javadoc/latest/com/google/gwt/user/client/Window.html#addWindowScrollHandler（com.google.gwt.user.client.窗口. ScrollHandler）））

Mozilla

Mozilla确实有一些用于操作滚动条的扩展，但建议不要使用它们。

• -moz-scrollbars-none他们建议使用overflow：隐藏来代替this。
• -moz-scrollbars-horizontal类似于overflow-x
• -moz-scrollbars-vertical类似于overflow-y

• -moz-hidden-unscrollable仅在用户配置文件设置内部工作。禁用滚动XML根元素并禁用使用箭头键和鼠标滚轮滚动网页。

• Mozilla Developer Docs on'Overflow'

更多关于Mozilla的信息

据我所知，这不是真的有用，但值得注意的是，控制是否在Firefox中显示滚动条的属性是（参考链接）：

• 属性：滚动条
• 类型： n sIDO MBar道具
• 问题描述控制窗口中是否显示滚动条的对象。此属性在JavaScript中是“可替换的”。只读

最后但并非最不重要的是，填充就像魔法。

正如前面在其他一些回答中提到的，这里有一个足够不言自明的例子。

历史课

只是因为我很好奇，我想了解滚动条的起源，这些是我找到的最好的参考资料。

• 关于滚动和滚动条的10项发明
• https://tools.ietf.org/id/draft-hellstrom-textpreview-02.txt
• https://tools.ietf.org/id/draft-mrose-blocks-service-01.txt

杂项

在HTML5规范草案中，#0属性被定义为防止滚动条出现在iFrames中，以便它们可以与页面上的周围内容混合.虽然此元素未出现在最新版本中。

scrollbar BarProp对象是window对象的子对象，表示包含滚动机制或一些类似界面概念的用户交互界面元素。如果滚动条可见，window.scrollbars.visible将返回true。

interface Window {// The current browsing contextreadonly attribute WindowProxy window;readonly attribute WindowProxy self;attribute DOMString name;[PutForwards=href] readonly attribute Location location;readonly attribute History history;readonly attribute UndoManager undoManager;Selection getSelection();[Replaceable] readonly attribute BarProp locationbar;[Replaceable] readonly attribute BarProp menubar;[Replaceable] readonly attribute BarProp personalbar;[Replaceable] readonly attribute BarProp scrollbars;[Replaceable] readonly attribute BarProp statusbar;[Replaceable] readonly attribute BarProp toolbar;void close();void focus();void blur();// Truncated

历史API还包括用于在页面导航上进行滚动恢复的功能，以在页面加载时保留滚动位置。

window.history.scrollRestoration可用于检查滚动恢复的状态或更改其状态（附加="auto"/"manual"。Auto是默认值。将其更改为手动意味着您作为开发人员将拥有用户遍历应用历史记录时可能需要的任何滚动更改的所有权。如果需要，您可以在使用history.pushState（）推送历史条目时跟踪滚动位置。

---

进一步阅读：

• 维基百科上的滚动条
• 滚动条（Windows）
• 滚动方法
• 滚动方法-Microsoft开发网络
• Github上的iScroll（在上面的第一部分中引用）
• 滚动和滚动条Jakob Nielsen关于可用性的文章

示例

• 没有正文滚动的独立滚动面板（仅使用CSS）-Ben Fray（10-21-2014）

如果您想滚动工作，在隐藏滚动条之前，请考虑样式他们。现代版本的OS X和移动操作系统具有滚动条，而不适合用鼠标抓取，非常漂亮和中性。

为了隐藏滚动条，John Kurlak的技巧除了离开之外效果很好没有触摸板的Firefox用户无法滚动，除非他们有一只带轮子的老鼠，他们可能会这样做，但即使这样，他们通常也可以只能垂直滚动。

约翰的技术使用三个元素：

• 屏蔽滚动条的外部元素。
• 具有滚动条的中间元素。
• 和一个内容元素来设置中间元素的大小并使它有滚动条。

必须可以设置外部元素和内容元素的大小相同这消除了使用百分比，但我想不出其他任何事情”””不工作与正确的调整。

我最关心的是是否所有版本的浏览器都设置滚动条以使可见溢出内容可见。我已经在当前浏览器中进行了测试，但是#36825；的人

原谅我的SASS； P

%size {// set width and height}
.outer {// mask scrollbars of childoverflow: hidden;// set mask size@extend %size;// has absolutely positioned childposition: relative;}
.middle {// always have scrollbars.// don't use auto, it leaves vertical scrollbar showingoverflow: scroll;// without absolute, the vertical scrollbar showsposition: absolute;}// prevent text selection from revealing scrollbar, which it only does on// some webkit based browsers..middle::-webkit-scrollbar {display: none;}
.content {// push scrollbars behind mask@extend %size;}

测试

OS X是10.6.8。Windows是Windows 7。

• Firefox 32.0隐藏滚动条。箭头键不会滚动，即使在单击焦点后，但是鼠标滚轮和触控板上的两个手指可以。OS X和Windows。
• Chrome37.0隐藏滚动条。单击对焦后箭头键起作用。鼠标滚轮和触控板工作。OS X和Windows。
• Internet Explorer 11隐藏滚动条。单击对焦后箭头键起作用。鼠标滚轮工作。窗口。
• Safari隐藏滚动条。单击对焦后箭头键起作用。鼠标滚轮和触控板工作。OS X.
• Android 4.4.4和4.1.2。隐藏滚动条。触摸滚动工作。尝试在Chrome37.0，火狐32.0和4.4.4上的HTMLViewer（无论是什么）。在HTMLViewer中，页面是蒙版内容的大小，也可以滚动！滚动与页面缩放交互可接受。

我的答案即使在overflow:hidden;时也会滚动，使用jQuery：

例如，用鼠标滚轮水平滚动：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script><script type='text/javascript' src='/js/jquery.mousewheel.min.js'></script><script type="text/javascript">$(function() {
$("YourSelector").mousewheel(function(event, delta) {
this.scrollLeft -= (delta * 30);event.preventDefault();});});</script>

我的超文本标记语言是这样的：

<div class="container"><div class="content"></div></div>

将其添加到要隐藏滚动条的div：

.content {position: absolute;right: -100px;overflow-y: auto;overflow-x: hidden;height: 75%; /* This can be any value of your choice */}

把这个加到容器里

.container {overflow-x: hidden;max-height: 100%;max-width: 100%;}

隐藏滚动条的跨浏览器方法。

它在Edge，Chrome，Firefox和Safari上进行了测试

隐藏滚动条，同时仍然可以用鼠标滚轮滚动！

代码

/* Make parent invisible */#parent {visibility: hidden;overflow: scroll;}
/* Safari and Chrome specific style. Don't need to make parent invisible, because we can style WebKit scrollbars */#parent:not(*:root) {visibility: visible;}
/* Make Safari and Chrome scrollbar invisible */#parent::-webkit-scrollbar {visibility: hidden;}
/* Make the child visible */#child {visibility: visible;}

这对我来说适用于简单的CSS属性：

.container {-ms-overflow-style: none;  // Internet Explorer 10+scrollbar-width: none;  // Firefox}.container::-webkit-scrollbar {display: none;  // Safari and Chrome}

对于旧版本的Firefox，请使用：overflow: -moz-scrollbars-none;

我写了一个WebKit版本，其中包含一些选项，例如自动隐藏、小版本、scroll唯一或只有-x：

._scrollable{@size: 15px;@little_version_ratio: 2;@scrollbar-bg-color: rgba(0,0,0,0.15);@scrollbar-handler-color: rgba(0,0,0,0.15);@scrollbar-handler-color-hover: rgba(0,0,0,0.3);@scrollbar-coner-color: rgba(0,0,0,0);
overflow-y: scroll;overflow-x: scroll;-webkit-overflow-scrolling: touch;width: 100%;height: 100%;
&::-webkit-scrollbar {background: none;width: @size;height: @size;}
&::-webkit-scrollbar-track {background-color:@scrollbar-bg-color;border-radius: @size;}
&::-webkit-scrollbar-thumb {border-radius: @size;background-color:@scrollbar-handler-color;&:hover{background-color:@scrollbar-handler-color-hover;}}
&::-webkit-scrollbar-corner {background-color: @scrollbar-coner-color;}
&.little{&::-webkit-scrollbar {background: none;width: @size / @little_version_ratio;height: @size / @little_version_ratio;}&::-webkit-scrollbar-track {border-radius: @size / @little_version_ratio;}&::-webkit-scrollbar-thumb {border-radius: @size / @little_version_ratio;}}
&.autoHideScrollbar{overflow-x: hidden;overflow-y: hidden;&:hover{overflow-y: scroll;overflow-x: scroll;-webkit-overflow-scrolling: touch;&.only-y{overflow-y: scroll !important;overflow-x: hidden !important;}
&.only-x{overflow-x: scroll !important;overflow-y: hidden !important;}}}
&.only-y:not(.autoHideScrollbar){overflow-y: scroll !important;overflow-x: hidden !important;}
&.only-x:not(.autoHideScrollbar){overflow-x: scroll !important;overflow-y: hidden !important;}}

http://codepen.io/hicTech/pen/KmKrjb

将此CSS代码复制到隐藏滚动条的客户代码：

<style>
::-webkit-scrollbar {display: none;}
#element::-webkit-scrollbar {display: none;}
</style>

这是我的解决方案，理论上涵盖了所有现代浏览器：

html {scrollbar-width: none; /* For Firefox */-ms-overflow-style: none; /* For Internet Explorer and Edge */}
html::-webkit-scrollbar {width: 0px; /* For Chrome, Safari, and Opera */}

html可以替换为要隐藏滚动条的任何元素。

_{注意：我浏览了其他19个答案，想看看大家是否已经讨论过我发布的代码，而且似乎没有一个答案可以概括2019年的情况，尽管其中很多都非常详细。如果有人说过这个，我很抱歉错过了。}

CSS可以用来隐藏滚动条吗？你会怎么做？

如果您希望从浏览器视口中删除垂直（和水平）滚动条，请添加：

style="position: fixed;"

<body>元素。

Javascript：

document.body.style.position = 'fixed';

css：

body {position: fixed;}

关于彼得的回答：

如果您想从iframed中删除滚动条，您需要在iframed的网站中添加用于删除滚动条的样式。无法在iframed中设置包括滚动条在内的元素的样式。

有iFrame的网站：

<!DOCTYPE html><html lang="en"><meta charset="UTF-8"><title>Page Title</title><body><iframe src="/iframe"></iframe></body></html>

iframed的网站：

<!DOCTYPE html><html lang="en"><meta charset="UTF-8"><title>Page Title</title>
<style>html, body {margin: 0;padding: 0}.content {scrollbar-width: none;}
.content::-webkit-scrollbar {display: none;}
.content {height: 100vh;overflow: scroll;}</style>
<body><div class="content"><h1>This is a Heading</h1><p>This is a paragraph.</p><p>This is another paragraph.</p><h1>This is a Heading</h1><p>This is a paragraph.</p><p>This is another paragraph.</p><h1>This is a Heading</h1><p>This is a paragraph.</p><p>This is another paragraph.</p><h1>This is a Heading</h1><p>This is a paragraph.</p><p>This is another paragraph.</p><h1>This is a Heading</h1><p>This is a paragraph.</p><p>This is another paragraph.</p><h1>This is a Heading</h1><p>This is a paragraph.</p><p>This is another paragraph.</p></div></body></html>