Question

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

提前谢谢！

Answer 1

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

这是完整的CSS：

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

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

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

Answer 2

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

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

Example here

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

Answer 3

如果您包装内容而不想在<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;
}

您可能需要稍微修改页面内容，这对于kludgy方面来说很有吸引力，但据我所知，这是获得所需内容的唯一方法。 Here's a fiddle that shows it in action

Answer 4

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

<强> CSS：

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

Answer 5

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

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

Answer 6

通过CSS解决方案试试

body{
      overflow : hidden
}

如果必须在jQuery中完成同样的事情

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

这应该像魅力一样。

隐藏/删除滚动条但允许滚动

6 个答案: