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

Question

隐藏滚动条，但仍然可以滚动我希望能够滚动整个页面，但不显示滚动条。在谷歌浏览器中它是：::-webkit-scrollbar {      display: none; }但是Mozilla Firefox和Internet Explorer似乎并没有那样工作。我也在CSS中尝试过这个：overflow: hidden;这确实隐藏了滚动条，但我不能滚动了。有什么办法可以删除滚动条，同时还能滚动整个页面吗？请使用CSS或HTML。

Answer 1

这适用于简单的CSS属性：

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

更新：scrollbar-width为Firefox 添加了新属性。

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

Answer 2

更新： Firefox现在支持使用CSS隐藏滚动条，因此现在涵盖了所有主流浏览器（Chrome，Firefox，IE，Safari等）。

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

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

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

---

原始答案：

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

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

演示：

• 垂直

• 横

• 两个方向

垂直版本的示例代码：

HTML：

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

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

Answer 3

只是一个工作正常的测试。

#parent{
    height: 100%;
    width: 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 */}

工作小提琴

JavaScript的：

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

JavaScript工作小提琴

要么

使用Position: absolute，

#parent{
    height: 100%;
    width: 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;}

工作小提琴

JavaScript工作小提琴

信息：

根据这个答案，我创建了一个简单的滚动插件。我希望这会对某人有所帮助。

Answer 4

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