Question

我有一个div有很多内容，因此滚动..如何隐藏滚动条使其不可见。编辑：我想滚动工作！那么..滚动没有滚动条？

例如

.scrolling_div {

     overflow:auto;
     /*something else to hide the scrollbar?*/

}

Answer 1

好的，我花了一些时间来编写最少的代码。

检查DEMO。将鼠标悬停在div上并滚动以查看滚动条。

注意这是使用外部插件来收听mousewheel event。

DEMO page for the plugin

overflow:hidden应隐藏滚动条。

.scrolling_div {
     overflow: hidden;
}

溢出可以采用以下任何一个值，

<强>可见       默认值。内容未被剪裁，可以在内容框外呈现。

<强>隐藏       剪辑内容并且不提供滚动条。

<强>滚动       内容被剪切，桌面浏览器使用滚动条，无论是否剪切任何内容。这避免了滚动条在动态环境中出现和消失的任何问题。打印机可能会打印出溢出的内容。

自动       如果内容溢出，请提供滚动条。

Reference

Answer 2

overflow: auto;表示“必要时显示滚动条”。将其更改为overflow: hidden;以禁用滚动。

编辑：好的，你想制作一个自定义滚动条。然后查看this sample jsFiddle了解如何开始 - 它包括鼠标滚动和拖动滚动条。

Answer 3

你可以试试这个：

html {
        overflow: hidden;
    }

它将从所有窗口中删除滚动条。

否则，如果您只需要特定的div：

.scrolling_div {

     overflow: hidden;

}

Answer 4

这实际上取决于你的目标。 see here

overflow:hidden;可能就是您想要的。

如果你想深入了解css3，你可以使用overflow-x和overflow-y来获得更多选项。

Answer 5

隐藏滚动条的唯一方法是使内容不可滚动，如果超出高度（overflow: hidden）则切断。老实说，为什么你想要一个可滚动但没有滚动条的页面？这会让任何访客感到困惑。你无法用CSS做到这一点。

就自定义滚动条而言，还有JavaScripts可以做到这一点。但请确保如果用户将其禁用，他们仍然可以正常滚动页面。

Answer 6

使用包装器覆盖您想要滚动的元素而不使用滚动条，并使包装器在水平基础上比要滚动的元素更窄。这就是我的意思：http://jsfiddle.net/FlagelloDiDio/EdgTt/

如何使用CSS隐藏滚动条？

6 个答案: