2

我正在尝试像这样隐藏默认浏览器垂直滚动条：

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 链接

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

提前致谢。

.

- 更新 -

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

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

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

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

4

2 回答 2

2

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

例如，如果您将使用 chrome 在显示器上显示，您可以使用-webkithack 隐藏滚动条：

::-webkit-scrollbar { 
    width: 0 !important
}
于 2013-10-18T09:05:37.507 回答
1

您是否看过这个似乎表明这不能仅使用 css 而是需要一点 js 的答案？

隐藏滚动条，同时仍然可以使用鼠标/键盘滚动

于 2013-10-17T14:29:40.247 回答