从 <body> 隐藏/删除滚动条但允许滚动答案

【问题标题】：Hide/remove scrollbar from <body> but allow scrolling从 <body> 隐藏/删除滚动条但允许滚动
【发布时间】：2017-02-18 21:24:39
【问题描述】：

根据标题，有没有办法从 body（不是 div，而是整个 body）隐藏/删除滚动条并保持启用“可滚动属性”？这些天我一直在尝试不同的解决方案，但都没有真正奏效。

提前谢谢你！

【问题讨论】：

在这里查看stackoverflow.com/questions/2469529/…
您必须将滚动隐藏为垂直或水平
blogs.msdn.microsoft.com/kurlak/2013/11/03/…
因为是的，如果你能打破它们并迷惑所有人，为什么还要保留全世界都知道和依赖的约定... /rant
@Roberrrt 我在过去几天尝试过该解决方案，但它不起作用（至少在身体上）。

标签： javascript jquery html css document-body

【解决方案1】：

-webkit- 来自Fabian Schultz 的解决方案效果很好，我补充说： -ms-overflow-style:none; 隐藏 IE 上的滚动条。启用滚动，隐藏滚动条。

这是完整的 CSS：

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

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

body {
  -ms-overflow-style:none;
}

【讨论】：

【解决方案2】：

如果您将不想滚动的内容包装在 <div class='hidden-scrollbar'> 中，例如，将可滚动内容放入 <div class='inner'> 之类的内容中，例如：

<div class='hidden-scrollbar'>
    <div class='inner'>
        Lorem ipsum dolor sit amet...
    </div>
</div>

您可以应用以下样式来移除垂直滚动条：

body {
    padding:50px;   
}

.hidden-scrollbar {
    background-color:black;
    border:2px solid #666;
    color:white;  
    overflow:hidden;
    text-align:justify;    
}

.hidden-scrollbar .inner {
    height:200px;
    overflow:auto;
    margin:15px -300px 15px 15px;
    padding-right:300px;
}

您可能需要稍微修改页面内容，这有点笨拙，但据我所知，这是获得所需内容的唯一方法。 Here's a fiddle that shows it in action.

【讨论】：

【解决方案3】：

在 body-element 上隐藏滚动条并仍然保留功能似乎是一件很难的事情。但这对您来说可能是一个足够好的解决方案：

CSS：

body{overflow:hidden;} 
body:hover {overflow:auto;}

【讨论】：

【解决方案4】：

在 webkit 浏览器中，您可以使用滚动条样式来“隐藏”它：

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

Example here.

不幸的是这个doesn't work in IE, Edge & Firefox。

【讨论】：

您的代码在 webkit 浏览器中运行流畅。谢谢！两个问题：1) 你知道一些 Firefox 和 IE/Edge 的 hack 吗？ 2）如何使用jQuery动态实现（例如：隐藏/删除滚动条并在单击按钮后仍然能够滚动）？
1) 看看github.com/noraesae/perfect-scrollbar 2) 我更新了我的示例，为该 CSS 规则添加了一个切换按钮，但它不能立即工作。您需要在禁用滚动条后等待一秒钟才能使更改生效。
“完美滚动条”似乎不起作用。我所做的是：1）分配一个 id="container" 以及 position:relative 和 height:100%;到身体标签； 2) 初始化插件，如下所示： var container = document.getElementById('container'); ps.initialize(容器); 3) 调用'destroy'销毁滚动条：Ps.destroy(container);不幸的是，什么也没有发生。像“wheelSpeed”这样的参数效果很好。

【解决方案5】：

您可以使用下面的代码来隐藏垂直和水平滚动。有关详细答案，您可以查看此question。

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

【讨论】：

overflow:hidden 删除滚动条以及滚动的可能性。我想要的是隐藏/删除滚动条但仍然能够滚动。
在我发给人们的链接中也讨论了这种情况。通读其他答案。我没有对它们进行测试，但似乎您必须为每个浏览器安排它。

【解决方案6】：

通过 CSS 解决方案试试这个

body{
      overflow : hidden
}

如果在 jQuery 中也必须这样做

$("body").css("overflow", "hidden");

这应该像一个魅力。

【讨论】：

谢谢你，凯。是的，您的解决方案删除了滚动条，但您无法再滚动。我想要得到的是删除滚动条但仍然能够滚动。
这不是 OP 所要求的。溢出：隐藏；不仅隐藏滚动条，还阻止网站滚动。