Question

我正在尝试隐藏默认浏览器垂直滚动条，如下所示：

HTML ：

<html>
    <head>
        <meta charset="UTF-8">
        <title>Lider-Bet.com</title>
        <link rel="stylesheet" type="text/css" href="includes/css/style.css">
    </head>
    <body>
        <header>
            <div class="lider-bet-logo"></div>
        </header>

        <div id="main-wrapper">
            ...
        </div>

    </body>
</html>

CSS ：

body    {
    background: url('../img/body-background-default.png');
    overflow: hidden;
}

header  {
    display: block;
    width: 100%;
    height: 42px;
    background-image: url('../img/header-background-default.png');
    background-repeat: repeat-x;
    position: fixed;
    z-index: 999;
}

直到我将position:fixed添加到<header>代码。

这是JSFiddle link

PS：在JsFiddle上，即使没有将<header>标记定位到fixed，它也无法正常工作，可能这是一些JsFiddle引擎问题，因此您可以尝试从JsFiddle复制到你的电脑，试试吧。

提前致谢。

- UPDATE -

关于评论，我会更详细地解释：

创建此页面是为了通过墙上的显示器显示一些数据，因此没有物理用户，只有一个客户端会在某个位置自动滚动。

我想隐藏滚动条，但是当我从CSS执行此操作时，页面正在丢失滚动选项。此外，我正在尝试保持一个<header>对象：当页面向下滚动时，无论如何此对象必须位于顶部。

首先我认为这是浏览器发行者，但后来我在不同的浏览器中尝试过，结果是一样的：隐藏滚动条后，当我将position:fixed放到<header>对象时，我无法滚动页面。 / p>

Answer 1

据我了解，您只需在一台显示器上显示它，因此您可以针对一个浏览器优化您的视图。

例如，如果您使用chrome在显示器上显示，则可以使用-webkit hack来隐藏滚动条：

::-webkit-scrollbar { 
    width: 0 !important
}

Answer 2

你有没有看到这个答案似乎表明这不能用css完成但需要一点js？

hide scrollbar while still able to scroll with mouse/keyboard

身体溢出：通过鼠标滚轮隐藏禁用滚动

2 个答案: