logo标签列表

“Body overflow:hidden”禁用鼠标滚轮滚动。

htmlcss
3
我正在尝试像这样隐藏默认的浏览器垂直滚动条：
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;
}

“当我将<header>标签的position:fixed属性添加后，它可以工作。JSFiddle链接。在JsFiddle上即使不将<header>标签定位为fixed，它也无法正常工作，可能是由于JsFiddle引擎的问题，因此您可以尝试从JsFiddle复制到您的电脑并尝试。此页面旨在通过墙上的监视器显示一些数据，因此不会有物理用户，只有一个客户端会自动滚动到某个位置。我想隐藏滚动条，但是当我从CSS中这样做时，页面就失去了滚动选项。同时，我试图保持一个<header>对象固定：当页面向下滚动时，该对象必须始终置于顶部。起初我以为这是浏览器的问题，但是后来我在不同的浏览器中尝试了一下，结果是相同的：在将<header>对象的position:fixed属性添加后，隐藏滚动条后无法滚动页面。”
3
你想达成什么目标？不滚动屏幕能否读完剩下的文档？你能完整地解释一下你的目标吗？ - sun
1
你到底想要实现什么？你想隐藏滚动条，但用户仍然可以通过滚轮滚动吗？这对用户体验来说并不好。 - shshaw
1
它对我有效 :) 也许这是浏览器特定的问题？ - Plynx
实际上，使用overflow: hidden;大多数UA中不应该允许滚动。我宁愿附加处理滚轮转动的事件。 - el Dude
感谢您的回复。请查看我在问题上的更新。 - zur4ik
显示剩余4条评论
2个回答
2

据我理解，您希望只在一个显示器上展示内容，这样您就可以针对一个浏览器优化您的视图。

例如，如果您将使用 Chrome 在显示器上展示内容，您可以使用 -webkit hack 隐藏滚动条：

::-webkit-scrollbar { 
    width: 0 !important
}
1
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接