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

希望这会有所帮助，欢呼。

当身体溢出时我无法滚动：隐藏和固定元素

1 个答案: