隐藏HTML页面上的滚动条-Java 学习之路

629

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

19 回答

13

我相信你可以使用溢出的CSS属性来操纵它，但它们的浏览器支持有限 . 有消息称其为IE5，Firefox 1.5和Safari 3 - 可能足以满足您的需求 .

这个链接有一个很好的讨论：http://www.search-this.com/2008/03/26/scrolling-scrolling-scrolling/

回复于 2024-05-06T23:05:30+08:00
10
您可以将CSS属性 overflow 和 -ms-overflow-style 与 ::-webkit-scrollbar 结合使用 .

在IE10，Firefox，Safari和Chrome上测试过，效果很好：
```
.container {
    -ms-overflow-style: none;  // IE 10+
    overflow: -moz-scrollbars-none;  // Firefox
}
.container::-webkit-scrollbar { 
    display: none;  // Safari and Chrome
}
```
当您使用 padding-right 隐藏滚动条时，这是一个比其他解决方案更好的解决方案，因为每个浏览器的默认滚动条宽度不同 .

Note: 在最新版本的Firefox中，不推荐使用 -moz-scrollbars-none 属性（link） .
回复于 2024-05-06T23:05:30+08:00

你可以用一个包装div来实现这个目的，它隐藏了溢出，内部div设置为auto .

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

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 width of all the scroll bars across
     * the devices you are targeting.
     * padding = -margin
     */
    margin-right: -100px;
    padding-right: 100px;
}

回复于 2024-05-06T23:05:30+08:00

Cross Browser Approach to hiding the scrollbar.

经过测试的Edge，Chrome，Firefox，Safari

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

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

回复于 2024-05-06T23:05:30+08:00

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

回复于 2024-05-06T23:05:30+08:00

9

只是想到我会向任何读这个问题的人指出设置溢出：body元素上的hidden（或overflow-y）并没有为我隐藏滚动条 . 我不得不使用HTML元素 .

回复于 2024-05-06T23:05:30+08:00

463

我写了一个webkit版本，其中包含一些选项，如 auto hide ， little version ，滚动 only-y 或 only-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

回复于 2024-05-06T23:05:30+08:00

即使 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>

回复于 2024-05-06T23:05:30+08:00

6

要禁用垂直滚动条，只需添加： overflow-y:hidden;

了解更多：overflow

回复于 2024-05-06T23:05:30+08:00
6

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

但是，如果您仍然希望用户能够滚动该内容（不显示滚动条），则必须使用JavaScript . 请在此处找到解决方案：hide scrollbar while still able to scroll with mouse/keyboard

回复于 2024-05-06T23:05:30+08:00
37
使用css overflow属性：
```
.noscroll {
  width:150px;
  height:150px;
  overflow: auto; /* or hidden, or visible */
}
```
以下是一些例子：
- http://www.brunildo.org/test/Overflowxy2.html
- http://css-tricks.com/the-css-overflow-property/
回复于 2024-05-06T23:05:30+08:00
10
如果您希望滚动工作，在隐藏滚动条之前，请考虑设置样式 . 现代版本的OS X和移动操作系统都有滚动条，虽然用鼠标抓取是不切实际的，但却非常漂亮和中立 .

要隐藏滚动条，a technique by John Kurlak工作正常，除非让没有触摸板的Firefox用户无法滚动，除非他们有一个带轮子的鼠标，他们可能会做，但即便如此，他们通常只能垂直滚动 .

约翰的技术使用三个元素：
- 用于屏蔽滚动条的外部元素 .
- 具有滚动条的中间元素 .
- 还有一个内容元素，用于设置中间元素的大小并使其具有滚动条 .
必须可以将外部元素和内容元素的大小设置为相同，这样可以消除使用百分比，但我无法想到任何其他不适用于正确调整的内容 .

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

请原谅我SASS; P
```
%size {
    // set width and height
}

.outer {
    // mask scrollbars of child
    overflow: hidden;
    // set mask size
    @extend %size;
    // has absolutely positioned child
    position: relative;
}

.middle {
    // always have scrollbars.
    // don't use auto, it leaves vertical scrollbar showing
    overflow: scroll;
    // without absolute, the vertical scrollbar shows
    position: 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 .
- Chrome 37.0隐藏的滚动条 . 单击焦点后箭头键工作 . 鼠标滚轮和触控板工作 . OS X和Windows .
- Internet Explorer 11隐藏的滚动条 . 单击焦点后箭头键工作 . 鼠标滚轮工作 . 视窗 .
- Safari 5.1.10隐藏的滚动条 . 单击焦点后箭头键工作 . 鼠标滚轮和触控板工作 . OS X.
- Android 4.4.4和4.1.2 . 隐藏的滚动条 . 触摸滚动有效 . 在4.4.4上尝试使用Chrome 37.0，Firefox 32.0和HTMLViewer（不管是什么） . 在HTMLViewer中，页面是蒙版内容的大小，也可以滚动！滚动与页面缩放相互作用可接受 .
回复于 2024-05-06T23:05:30+08:00
368
在body标签上设置 overflow: hidden; ，如下所示：
```
<style type="text/css">
body {
    overflow:hidden;
}
</style>
```
上面的代码隐藏了水平和垂直滚动条 .

如果要隐藏 only the vertical scrollbar ，请使用 overflow-y ：
```
<style type="text/css">
body {
    overflow-y:hidden;
}
</style>
```
如果你想隐藏 only the horizontal scrollbar ，请使用 overflow-x ：
```
<style type="text/css">
body {
    overflow-x:hidden;
}
</style>
```
更新：我的意思是隐藏，抱歉，刚刚醒来:-)

注意：它还会禁用滚动功能 . 如果您只想隐藏滚动条而不是滚动功能，请参阅以下答案 .
回复于 2024-05-06T23:05:30+08:00
3
是的，有点......

当您提出问题"Can the scroll-bars of a browser be removed in some way, rather than simply hidden or camouflaged"时，每个人都会说"Not possible"，因为无法从兼容的所有浏览器中删除滚动条和交叉兼容的方式，然后有可用性的整个论点 .

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

这只是意味着我们必须主动替换浏览器通常会为我们做的相同行为并告诉浏览器感谢，但不要感谢好友 . 我们可以避免滚动（完全可行），并在我们制作的元素中滚动并对其进行更多控制，而不是尝试删除滚动条（我们都知道这是不可能的） .

创建一个隐藏溢出的div . 检测用户何时尝试滚动但无法检测，因为我们已禁用浏览器使用overflow：hidden ...滚动的功能，而是在发生这种情况时使用Javascript移动内容 . 从而在没有浏览器默认滚动的情况下创建我们自己的滚动或使用像iScroll这样的插件

---

为了彻底;所有供应商特定的操纵滚动条的方法：

Internet Explorer 5.5

*这些属性从未成为CSS规范的一部分，它们也未被批准或供应商加前缀，但它们在Internet Explorer和Konqueror中工作 . 这些也可以在每个应用程序的用户样式表中本地设置 . 在IE中，您可以在“样式表”选项卡下的Konqueror的“辅助功能”选项卡下找到它 .
```
body, html { /* these are default, can be replaced by hex 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;
}
```
从IE8开始，这些属性是由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的更多详细信息

IE使 scroll 可用，它设置是否禁用或启用滚动条;它也可以用来获取滚动条位置的值 .

使用Microsoft Internet Explorer 6及更高版本，当您使用！DOCTYPE声明指定符合标准的模式时，此属性适用于HTML元素 . 如果未指定符合标准的模式，则与早期版本的IE一样，此属性适用于 BODY 元素， NOT HTML 元素 .

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

http://msdn.microsoft.com/en-us/library/ie/ms534393(v=vs.85).aspx
Webkit

与滚动条自定义相关的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 - 垂直伪类适用于任何具有垂直方向的滚动条 .
- :decrement - 减量伪类适用于按钮和轨迹 . 它指示按钮或轨道件在使用时是否会减小视图的位置（例如，在垂直滚动条上向上，在水平滚动条上留下） .
- :increment - 增量伪类适用于按钮和轨迹 . 它指示按钮或轨道件在使用时是否会增加视图的位置（例如，向下在垂直滚动条上，在水平滚动条上） .
- :start - start伪类适用于按钮和轨道片段 . 它指示对象是否放在拇指之前 .
- :end - 结束伪类适用于按钮和轨道片段 . 它指示对象是否放在拇指之后 .
- :double-button - 双按钮伪类适用于按钮和轨迹 . 它用于检测按钮是否是滚动条同一端的一对按钮的一部分 . 对于轨道件，它指示轨道件是否邻接一对按钮 .
- :single-button - 单按钮伪类适用于按钮和轨迹 . 它用于检测按钮是否单独位于滚动条的末尾 . 对于轨道件，它指示轨道件是否邻接单个按钮 .
- :no-button - 适用于跟踪片段并指示轨道片是否运行到滚动条的边缘，即轨道的那一端没有按钮 .
- :corner-present - 适用于所有滚动条片段并指示是否存在滚动条角 .
- :window-inactive - 适用于所有滚动条片段，并指示包含滚动条的窗口当前是否处于活动状态 . （在最近的夜宵中，这个伪类现在也适用于:: selection . 我们计划扩展它以适用于任何内容并将其作为新的标准伪类提出 . ）
Examples of these combinations
```
::-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 */ }
```
- Styling Scrollbars - Webkit.org
有关Chrome的详细信息

addWindowScrollHandler public static HandlerRegistration addWindowScrollHandler（Window.ScrollHandler handler）添加一个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-scrollbars-none 他们建议使用overflow：hidden代替这个 .
- -moz-scrollbars-horizontal 类似于overflow-x
- -moz-scrollbars-vertical 与overflow-y类似
- -moz-hidden-unscrollable 仅在用户配置文件设置内部工作 . 禁用滚动XML根元素并禁用箭头键和鼠标滚轮滚动网页 .
- Mozilla Developer Docs on 'Overflow'
关于Mozilla的更多细节

据我所知，这并不是很有用，但值得注意的是，控制是否在Firefox中显示滚动条的属性是：（reference link）
- Attribute: 滚动条
- Type: nsIDOMBarProp
- Description: 控制是否在窗口中显示滚动条的对象 . 这个属性在JavaScript中是"replaceable" . 只读
最后但并非最不重要的是，填充就像魔术一样 .

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

历史课

仅仅因为我很好奇，我想了解滚动条的起源，这些是我发现的最佳参考 .
其他

In an HTML5 specification draft, the seamless attribute was defined to prevent scroll-bars from appearing in iFrames so that they could be blended with surrounding content on a page.虽然此元素未出现在最新版本中 .

scrollbar BarProp对象是 window 对象的子对象，表示包含滚动机制或某些类似接口概念的用户界面元素 . 如果滚动条可见， 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
```
History API还包括用于页面导航上的滚动恢复的功能，以在页面加载时保持滚动位置 . window.history.scrollRestoration 可以用来检查scrollrestoration的状态或更改其状态（追加 ="auto"/"manual" . 自动为默认值 . 它更改为手动意味着你当用户遍历开发商将采取可能需要的任何滚动变化的所有权应用程序的历史记录 . 如果需要，可以在使用history.pushState（）推送历史记录条目时跟踪滚动位置 .

---

进一步阅读：
例子
- Independent scrolling panels with no body scroll (using just CSS) - Ben Frain (10-21-2014)
回复于 2024-05-06T23:05:30+08:00

将此CSS代码复制到客户代码以隐藏Scrollbar

<style>

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

  #element::-webkit-scrollbar { 
     display: none; 
  }

  </style>

回复于 2024-05-06T23:05:30+08:00

除了彼得的回答：

#element::-webkit-scrollbar { 
     display: none; 
 }

这对IE10也是一样的：

#element {
      -ms-overflow-style: none;
 }

回复于 2024-05-06T23:05:30+08:00

830

为了完整起见，这适用于webkit：

#element::-webkit-scrollbar { 
    display: none; 
}

如果您想隐藏所有滚动条，请使用

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

我不确定还原 - 这确实有效，但可能有正确的方法：

::-webkit-scrollbar { 
    display: block; 
}

你当然可以使用 width: 0 ，这可以用 width: auto 轻松恢复，但我不是滥用 width 进行可见性调整的粉丝 .

要查看您当前的浏览器是否支持此功能，请尝试以下代码段：

.content {
  /* These rules create an artificially confined space, so we get 
     a scrollbar that we can hide. They are not part of the hiding itself. */

  border: 1px dashed gray;
  padding: .5em;
  
  white-space: pre-wrap;
  height: 5em;
  overflow-y: scroll;
}

.content::-webkit-scrollbar { 
  /* This is the magic bit */
  display: none;
}

<div class='content'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eu
urna et leo aliquet malesuada ut ac dolor. Fusce non arcu vel ligula
fermentum sodales a quis sapien. Sed imperdiet justo sit amet venenatis
egestas. Integer vitae tempor enim. In dapibus nisl sit amet purus congue
tincidunt. Morbi tincidunt ut eros in rutrum. Sed quam erat, faucibus
vel tempor et, elementum at tortor. Praesent ac libero at arcu eleifend
mollis ut eget sapien. Duis placerat suscipit eros, eu tempor tellus
facilisis a. Vivamus vulputate enim felis, a euismod diam elementum
non. Duis efficitur ac elit non placerat. Integer porta viverra nunc,
sed semper ipsum. Nam laoreet libero lacus.

Sed sit amet tincidunt felis. Sed imperdiet, nunc ut porta elementum,
eros mi egestas nibh, facilisis rutrum sapien dolor quis justo. Quisque
nec magna erat. Phasellus vehicula porttitor nulla et dictum. Sed
tincidunt scelerisque finibus. Maecenas consequat massa aliquam pretium
volutpat. Duis elementum magna vel velit elementum, ut scelerisque
odio faucibus.
</div>

（请注意，这不是问题的正确答案，因为它也隐藏了水平条，但无论如何's what I was looking for when Google pointed me here, so I figured I' d都会发布它 . ）

回复于 2024-05-06T23:05:30+08:00

如果你还有兴趣，我想我找到了你们的工作 . 这是我的第一周，但它对我有用..

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

.contentScroller {overflow-y: auto; visibility: hidden;}
.content {visibility: visible;}

回复于 2024-05-06T23:05:30+08:00

5
如果您正在寻找隐藏移动设备滚动条的解决方案，请按照Peter's answer进行操作！

这是一个jsfiddle，它使用下面的解决方案来隐藏水平滚动条 .
```
.scroll-wrapper{
    overflow-x: scroll;
}
.scroll-wrapper::-webkit-scrollbar { 
    display: none; 
}
```
在安卓4.0.4的三星平板电脑（原生浏览器和Chrome）以及iOS 6的iPad（Safari和Chrome）上进行测试 .
回复于 2024-05-06T23:05:30+08:00

隐藏HTML页面上的滚动条

19 回答

HTML

CSS

测试

是的，有点......

---

Internet Explorer 5.5

有关Internet Explorer的更多详细信息

Webkit

有关Chrome的详细信息

Mozilla

关于Mozilla的更多细节

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

历史课

其他

---

进一步阅读：

例子

相关问题