我的HTML是这样的：

<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%;
}

正如其他人已经说过的，使用CSS溢出。

但如果您仍然希望用户能够滚动该内容（滚动条不可见），则必须使用JavaScript。

在这里回答我的问题：隐藏滚动条，同时仍然可以使用鼠标/键盘滚动

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

它在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属性来操作它，但他们的浏览器支持有限。一位消息人士表示，它是Internet Explorer 5（及更高版本）、Firefox 1.5（及更新版本）和Safari 3（及更晚版本）——也许足以满足您的需求。

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

是的，有点。。

当你问“浏览器的滚动条是否可以以某种方式删除，而不是简单地隐藏或伪装”时，每个人都会说“不可能”，因为不可能以兼容和交叉兼容的方式从所有浏览器中删除滚动条，这就是可用性的全部论点。

然而，如果您不允许网页溢出，则可以防止浏览器需要生成和显示滚动条。

这意味着我们必须主动地替代浏览器通常会为我们做的相同行为，并告诉浏览器谢谢但不谢谢，伙计。我们可以避免滚动（完全可行），而不是试图删除滚动条（我们都知道这是不可能的），而是在我们制作的元素内滚动，并对其进行更多控制。

创建隐藏溢出的div。检测用户何时尝试滚动，但由于我们禁用了浏览器的溢出滚动功能而无法滚动：隐藏。。而是在发生这种情况时使用JavaScript向上移动内容。从而创建我们自己的滚动，而无需浏览器默认滚动或使用像iScroll这样的插件。

---

为了彻底；操作滚动条的所有供应商特定方式：

Internet Explorer 5.5+

*这些财产从来都不是CSS规范的一部分，也没有得到过批准或添加过供应商前缀，但它们可以在Internet Explorer和Konqueror中使用。这些也可以在每个应用程序的用户样式表中本地设置。在Internet Explorer中，您可以在“辅助功能”选项卡、Konqueror的“样式表”选项卡下找到它。

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;
}

从InternetExplorer8开始，这些财产的前缀都是Microsoft，但它们从未得到W3C的批准。

-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

有关Internet Explorer的详细信息

Internet Explorer允许滚动，设置是否禁用或启用滚动条；它也可以用来获得滚动条位置的值。

使用！DOCTYPE声明指定符合标准的模式，此属性适用于HTML元素。当未指定符合标准的模式时，与早期版本的Internet Explorer一样，此属性适用于BODY元素，而不是HTML元素。

还值得注意的是，在使用.NET时，Presentation框架中System.Windows.Controls.Primitives中的ScrollBar类负责呈现滚动条。

http://msdn.microsoft.com/en-us/library/ie/ms534393（v=vs.85）.aspx

MSDN。基本UI财产W3C中。关于非标准滚动条财产MSDN。NET ScrollBar类

---

网络工具包

与滚动条定制相关的WebKit扩展包括：

::-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 */

这些都可以与其他伪选择器组合：

：horizontal–水平伪类适用于任何具有水平方向的滚动条。：vertical–垂直伪类适用于任何具有垂直方向的滚动条。：减量–减量伪类应用于按钮和曲目。它指示按钮或轨迹条在使用时是否会减小视图的位置（例如，在垂直滚动条上向上，在水平滚动条上向左）。：increment–递增伪类应用于按钮和轨迹片段。它指示按钮或轨迹条在使用时是否会增加视图的位置（例如，在垂直滚动条上向下，在水平滚动条上向右）。：start–start伪类应用于按钮和曲目。它指示对象是否放置在拇指之前。：end–end伪类应用于按钮和曲目。它指示对象是否放置在拇指之后。：double button–双按钮伪类适用于按钮和曲目。它用于检测按钮是否是位于滚动条同一端的一对按钮的一部分。对于轨迹块，它指示轨迹块是否邻接一对按钮。：single button–单按钮伪类适用于按钮和曲目。它用于检测按钮是否单独位于滚动条的末尾。对于轨迹片段，它指示轨迹片段是否邻接单个按钮。：no button–应用于曲目，并指示曲目是否运行到滚动条的边缘，即曲目的末端没有按钮。：corner present–适用于所有滚动条，并指示是否存在滚动条角。：window inactive–适用于所有滚动条，并指示包含滚动条的窗口当前是否处于活动状态。（在最近的夜宵中，这个伪类现在也适用于：：selection。我们计划将其扩展到任何内容，并将其作为一个新的标准伪类。）

这些组合的示例

::-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 */ }

滚动条样式-Webkit.org

有关Chrome的更多详细信息

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

---

Mozilla公司

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

-moz滚动条none他们建议使用overflow：hidden来代替它。-moz滚动条水平类似于overflow-x-moz滚动条垂直类似于overflow-y-moz隐藏不可折叠仅在用户配置文件设置内部工作。禁用滚动XML根元素，并禁用使用箭头键和鼠标滚轮滚动网页。Mozilla开发者文档“溢出”

有关Mozilla的更多详细信息

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

属性：滚动条类型：nsIDOMBarProp描述：控制窗口中是否显示滚动条的对象。该属性在JavaScript中是“可替换的”。只读

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

正如前面在一些其他答案中提到的，这里有一个充分不言自明的说明。

---

历史课

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

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

混杂的

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

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

interface Window {
  // The current browsing context
  readonly 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.srollRestore可用于检查滚动恢复的状态或更改其状态（appending=“auto”/“manual”.Auto是默认值。将其更改为手动意味着您作为开发人员将拥有用户浏览应用程序历史记录时可能需要的任何滚动更改的所有权。如果需要，可以在使用history.pushState（）推送历史条目时跟踪滚动位置。

---

进一步阅读：

维基百科上的滚动条滚动条（Windows）滚动方法滚动方法-Microsoft开发人员网络Github上的iScroll（见上文第一节）Jakob Nielsen的一篇关于可用性的文章

示例

无正文滚动的独立滚动面板（仅使用CSS）-Ben Frain（2014年10月21日）

您可以使用隐藏溢出的包装器div，并将内部div设置为auto来实现这一点。

要删除内部div的滚动条，可以通过对内部div应用负边距将其从外部div的视口中拉出。然后对内部div使用相等的填充，以使内容保持在视图中。

JSFiddle公司

###HTML格式

<div class="hide-scroll">
    <div class="viewport">
        ...
    </div>
</div>

###CSS格式

.hide-scroll {
    overflow: hidden;
}

.viewport {
    overflow: auto;

    /* Make sure the inner div is not larger than the container
     * so that we have room to scroll.
     */
    max-height: 100%;

    /* Pick an arbitrary margin/padding that should be bigger
     * than the max scrollbar width across the devices that 
     * you are supporting.
     * padding = -margin
     */
    margin-right: -100px;
    padding-right: 100px;
}