Html 隐藏滚动条，但仍然可以滚动

Hide scroll bar, but while still being able to scroll

提问by Oussama el Bachiri

I want to be able to scroll through the whole page, but without the scrollbar being shown.

我希望能够滚动整个页面，但不显示滚动条。

In Google Chrome it's:

在谷歌浏览器中，它是：

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

But Mozilla Firefox and Internet Explorer don't seem to work like that.

但是 Mozilla Firefox 和 Internet Explorer 似乎不是这样工作的。

I also tried this in CSS:

我也在 CSS 中尝试过这个：

overflow: hidden;

That does hide the scrollbar, but I can't scroll any more.

这确实隐藏了滚动条，但我不能再滚动了。

Is there a way I can remove the scrollbar while still being able to scroll the whole page?

有没有办法可以在仍然能够滚动整个页面的同时删除滚动条？

With just CSS or HTML, please.

请只使用 CSS 或 HTML。

采纳答案by Mr_Green

Just a test which is working fine.

只是一个运行良好的测试。

#parent{
    width: 100%;
    height: 100%;
    overflow: hidden;
}

#child{
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    padding-right: 17px; /* Increase/decrease this value for cross-browser compatibility */
    box-sizing: content-box; /* So the width will be 100% + 17px */
}

Working Fiddle

工作小提琴

JavaScript:

JavaScript：

Since the scrollbar width differs in different browsers, it is better to handle it with JavaScript. If you do Element.offsetWidth - Element.clientWidth, the exact scrollbar width will show up.

由于不同浏览器的滚动条宽度不同，最好使用 JavaScript 处理。如果这样做Element.offsetWidth - Element.clientWidth，将显示确切的滚动条宽度。

JavaScript Working Fiddle

JavaScript 工作小提琴

Or

或者

Using Position: absolute,

使用Position: absolute,

#parent{
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
}

#child{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: -17px; /* Increase/Decrease this value for cross-browser compatibility */
    overflow-y: scroll;
}

Working Fiddle

工作小提琴

JavaScript Working Fiddle

JavaScript 工作小提琴

Information:

信息：

Based on this answer, I created a simple scroll plugin.

基于这个答案，我创建了一个简单的滚动插件。

回答by Anirban Bhui

It is easy in WebKit, with optional styling:

在 WebKit 中很容易，具有可选的样式：

html {
    overflow: scroll;
    overflow-x: hidden;
}
::-webkit-scrollbar {
    width: 0px;  /* Remove scrollbar space */
    background: transparent;  /* Optional: just make scrollbar invisible */
}
/* Optional: show position indicator in red */
::-webkit-scrollbar-thumb {
    background: #FF0000;
}

回答by Hristo Eftimov

This works for me with simple CSS properties:

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

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

For older versions of Firefox, use: overflow: -moz-scrollbars-none;

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

回答by Richrd

UPDATE:

更新：

Firefox now supports hiding scrollbars with CSS, so all major browsers are now covered (Chrome, Firefox, Internet Explorer, Safari, etc.).

Firefox 现在支持使用 CSS 隐藏滚动条，因此现在涵盖了所有主要浏览器（Chrome、Firefox、Internet Explorer、Safari 等）。

Simply apply the following CSS to the element you want to remove scrollbars from:

只需将以下 CSS 应用于要从中删除滚动条的元素：

.container {
    overflow-y: scroll;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
}
.container::-webkit-scrollbar { /* WebKit */
    width: 0;
    height: 0;
}

This is the least hacky cross browser solution that I'm currently aware of. Check out the demo.

这是我目前所知道的最简单的跨浏览器解决方案。查看演示。

---

---

ORIGINAL ANSWER:

原始答案：

Here's another way that hasn't been mentioned yet. It's really simple and only involves two divs and CSS. No JavaScript or proprietary CSS is needed, and it works in all browsers. It doesn't require explicitly setting the width of the container either, thus making it fluid.

这是另一种尚未提及的方式。它真的很简单，只涉及两个 div 和 CSS。不需要 JavaScript 或专有 CSS，它适用于所有浏览器。它也不需要明确设置容器的宽度，从而使其具有流动性。

This method uses a negative margin to move the scrollbar out of the parent and then the same amount of padding to push the content back to its original position. The technique works for vertical, horizontal and two way scrolling.

此方法使用负边距将滚动条移出父级，然后使用相同数量的填充将内容推回到其原始位置。该技术适用于垂直、水平和双向滚动。

Demos:

演示：

• Vertical
• Horizontal
• Both directions

• 垂直的
• 水平的
• 两个方向

Example code for the vertical version:

竖版示例代码：

HTML:

HTML：

<div class="parent">
  <div class="child">
    Your content.
  </div>
</div>

CSS:

CSS：

.parent {
  width: 400px;
  height: 200px;
  border: 1px solid #AAA;
  overflow: hidden;
}

.child {
  height: 100%;
  margin-right: -50px; /* Maximum width of scrollbar */
  padding-right: 50px; /* Maximum width of scrollbar */
  overflow-y: scroll;
}

回答by Arpit Singh

Use:

用：

<div style='overflow:hidden; width:500px;'>
   <div style='overflow:scroll; width:508px'>
      My scroll-able area
   </div>
</div>

This is a trick to somewhat overlap the scrollbar with an overlapping div which doesn't have any scroll bars:

这是一种将滚动条与没有任何滚动条的重叠 div 重叠的技巧：

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

This is only for WebKitbrowsers... Or you could use browser-specific CSS content (if there is any in future). Every browser could have a different and specific property for their respective bars.

这仅适用于WebKit浏览器...或者您可以使用特定于浏览器的 CSS 内容（如果将来有的话）。每个浏览器都可以为各自的栏设置不同的特定属性。

For Microsoft Edge use: -ms-overflow-style: -ms-autohiding-scrollbar;or -ms-overflow-style: none;as per MSDN.

对于微软边缘使用：-ms-overflow-style: -ms-autohiding-scrollbar;或-ms-overflow-style: none;为每MSDN。

There is no equivalent for Firefox. Although there is a jQuery plugin to achieve this, http://manos.malihu.gr/tuts/jquery_custom_scrollbar.html

Firefox 没有等价物。虽然有一个 jQuery 插件来实现这一点， http://manos.malihu.gr/tuts/jquery_custom_scrollbar.html

回答by Timo K?hk?nen

This answerdoesn't include the code, so here is the solution from page:

这个答案不包括代码，所以这里是页面的解决方案：

According to the page this approach doesn't need to know the width of the scrollbar ahead of time in order to work and the solution works for all browsers too, and can be seen here.

根据页面，这种方法不需要提前知道滚动条的宽度才能工作，并且该解决方案也适用于所有浏览器，可以在这里看到。

The good thing is that you are not forced to use padding or width differences to hide the scrollbar.

好消息是您不会被迫使用填充或宽度差异来隐藏滚动条。

This is also zoom safe. Padding/width solutions show the scrollbar when zoomed to minimum.

这也是缩放安全的。填充/宽度解决方案在缩放到最小值时显示滚动条。

Firefox fix: http://jsbin.com/mugiqoveko/1/edit?output

Firefox 修复：http: //jsbin.com/mugiqoveko/1/edit?output

.element,
.outer-container {
  width: 200px;
  height: 200px;
}
.outer-container {
  border: 5px solid purple;
  position: relative;
  overflow: hidden;
}
.inner-container {
  position: absolute;
  left: 0;
  overflow-x: hidden;
  overflow-y: scroll;
  padding-right: 150px;
}
.inner-container::-webkit-scrollbar {
  display: none;
}

<div class="outer-container">
  <div class="inner-container">
    <div class="element">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vehicula quam nibh, eu tristique tellus dignissim quis. Integer condimentum ultrices elit ut mattis. Praesent rhoncus tortor metus, nec pellentesque enim mattis nec. Nulla vitae turpis ut
      dui consectetur pellentesque quis vel est. Curabitur rutrum, mauris ut mollis lobortis, sem est congue lectus, ut sodales nunc leo a libero. Cras quis sapien in mi fringilla tempus condimentum quis velit. Aliquam id aliquam arcu. Morbi tristique
      aliquam rutrum. Duis tincidunt, orci suscipit cursus molestie, purus nisi pharetra dui, tempor dignissim felis turpis in mi. Vivamus ullamcorper arcu sit amet mauris egestas egestas. Vestibulum turpis neque, condimentum a tincidunt quis, molestie
      vel justo. Sed molestie nunc dapibus arcu feugiat, ut sollicitudin metus sagittis. Aliquam a volutpat sem. Quisque id magna ultrices, lobortis dui eget, pretium libero. Curabitur aliquam in ante eu ultricies.
    </div>
  </div>
</div>

回答by Innodel

Just use following three lines and your problem will be solved:

只需使用以下三行，您的问题将得到解决：

#liaddshapes::-webkit-scrollbar {
    width: 0 !important;
}

Where liaddshapes is the name of the div where scroll is coming.

其中 liaddshapes 是滚动即将到来的 div 的名称。

回答by Murhaf Sousli

This works for me cross-browser. However, this doesn't hide native scrollbars on mobile browsers.

这对我来说是跨浏览器的。但是，这不会隐藏移动浏览器上的原生滚动条。

In SCSS

在SCSS 中

.hide-native-scrollbar {
  scrollbar-width: none; /* Firefox 64 */
  -ms-overflow-style: none; /* Internet Explorer 11 */
  &::-webkit-scrollbar { /** WebKit */
    display: none;
  }
}

In CSS

在CSS 中

.hide-native-scrollbar {
  scrollbar-width: none; /* Firefox 64 */
  -ms-overflow-style: none; /* Internet Explorer 11 */
}
.hide-native-scrollbar::-webkit-scrollbar { /** WebKit */
  display: none;
}

回答by Meloman

The following was working for me on Microsoft, Chrome and Mozilla for a specific div element:

以下是我在 Microsoft、Chrome 和 Mozilla 上为特定 div 元素工作的：

div.rightsidebar {
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
div.rightsidebar::-webkit-scrollbar { 
    width: 0 !important;
}

回答by Mischa

HTML:

HTML：

<div class="parent">
    <div class="child">
    </div>
</div>

CSS:

CSS：

.parent{
    position: relative;
    width: 300px;
    height: 150px;
    border: 1px solid black;
    overflow: hidden;
}

.child {
    height: 150px;   
    width: 318px;
    overflow-y: scroll;
}

Apply CSS accordingly.

相应地应用 CSS。

Check it here(tested in Internet Explorer and Firefox).

在此处检查 （在 Internet Explorer 和 Firefox 中测试）。