当body使用overflow: hidden属性且存在固定位置的元素时，我无法滚动页面

Question

当body使用overflow: hidden属性且存在固定位置的元素时，我无法滚动页面

6

我想隐藏滚动条，所以我给我的网站主体添加了overflow:hidden;
现在我想让我的菜单栏固定在页面顶部，使用position: fixed;

但是当我将菜单栏设置为固定时，无法使用滚轮滚动整个页面。
谁知道答案？

body {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

这个功能正常运行，但是当我在菜单上加入position: fixed;后，就无法再滚动了。

.menu {
    position: fixed;
    width: 100%;
    height: 50px;
}

我希望你能理解我的问题。

- Dennis

6

你能提供一个代码演示吗？ - Hashem Qolami

2

据我所知，您正在对一个页面使用overflow: hidden，但仍希望滚动？ - asdf

抱歉，我暂时无法制作一个fiddle演示。但是这是我的网站http://eduweb.hhs.nl/~13002465/我想修复我的顶部菜单。但是当我这样做时，我就不能滚动了。 - Dennis

顶部菜单的修复与 position: fixed; 无关。在您的网站上启用或禁用它对您的网站滚动没有影响。overflow: hidden; 是禁用滚动的原因。当我禁用它并将菜单设置为 position: fixed; 时，一切似乎都正常工作。 - Mathijs Flietstra

如果您查看我的网站（http://eduweb.hhs.nl/~13002465/），页面溢出已经被隐藏，因此我可以正常滚动。但是当我将菜单的位置设置为position:fixed;时，它就不再起作用了。 - Dennis

显示剩余3条评论

2个回答

0

如果您将菜单固定，其他元素就无法固定，只有放在兄弟姐妹的顶部和底部的唯一元素可以固定。我可以通过HTML结构解决这个问题。

<body>
<nav class="menu"></nav>
<section></section>
<section>/<section>
....
<body>

- juan

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Mat Bloom · Accepted Answer

你可以使用jquery.mousewheel.js插件来完成此操作。

这是一个使用该插件的页面演示: http://jsfiddle.net/BQeWx/ JavaScript:

$('html,body').bind('mousewheel',function(ev, delta) {
    var scrollTop = $(this).scrollTop();
    $(this).scrollTop(scrollTop-Math.round(delta * 1));
});

CSS：

body, html { overflow: hidden; }

.body_wrapper {
    overflow: hidden;
    margin: 0; 
    padding: 0;
    width: 100%; 
    height: 100%; 
}

.wrapper {
    width: 100%;
    margin: 48px auto 0 auto;
    z-index: 10;
}

我已经对您的CSS进行了一些修改，注释中有说明。

如果这是预期的用户体验，您应该考虑添加一个固定的“返回顶部”链接，它出现在每个部分的侧面或底部。

插件文档：https://github.com/brandonaaron/jquery-mousewheel

希望这有所帮助，谢谢。