html - 正文溢出时无法滚动 : hidden and an fixed element

Question

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

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

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

这是可行的，但是当我在我的菜单上放置一个 position: fixed; 时，我不能再滚动了。

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

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

Answer 1

您可以使用 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

希望这有帮助，干杯。