我隐藏了滚动条(但它应该存在),现在我无法滚动

时间:2015-06-15 23:16:28

标签: css

对于这个几乎是漫画的标题感到抱歉,我无法以更好的方式解释这个问题。

我以为我已经完成了我的菜单http://www.jcml.pt/2但后来我注意到在某些浏览器(firefox,IE)中,“隐藏”滚动条仍会显示并弄乱我的菜单。在Chrome和Android中,一切都会按预期工作。

我打开了一个问题,后来通过创建一个额外的容器div并将代码更改为http://www.jcml.pt/3(添加额外的容器div)来解决该问题

但即使被隐藏,滚动应该是可能的,但它不起作用。 编辑:您可能需要降低窗口的高度,以便在版本2中看到您可以滚动但在版本3中您不能滚动

如果需要更多详细信息,请在此处突出显示部分代码或更好地解释问题,请告知我们。 如果我在几个小时看不到这种情况,那么如果需要,我也可以尝试创建一个简化版网站的小提琴。

编辑:这是一个小提琴,因此更容易看到代码以及我删除部分导航中不会干扰这种情况的地方。 http://jsfiddle.net/jcml/pyoqauLr/

代码中最相关的部分:

CSS

html, body {
    overflow: hidden;
    position: relative;
}

.menu {
    overflow: hidden;
    position: fixed;
    height: 100%;
    width: 100%;

.m1 {
    right: 0;
    top: 0;
    margin-top: 0;
    margin-right: 0;
}

.outer-container {
    height: 100%;
    position: relative;
    overflow: hidden;
    width: 100%;
}

.inner-container {
    display: table;
    height: 100%;
    position: fixed;
    overflow-x: hidden;
    overflow-y: scroll;
    width: 100%;
}

.inner-container::-webkit-scrollbar {
    display: none;
}

.links {
    height: 100%;
    display: table-cell;
    vertical-align: middle;
}

HTML

<body>
<div class="menu m1 corner">
    <div class="outer-container">
        <div class="inner-container">
            <div class="links">

0 个答案:

没有答案